单图上传 · 翼通系统开发

##html页面 ``` <tr style="display: ;"> <td>车辆照片：</td> <td> <div id="uploader-demo">  <div id="fileList" class="uploader-list" style="margin-bottom:15px;"></div> <div id="filePicker">选择图片</div> </div> <input type="hidden" id="txt_photos" name="photos" value="" /> </td> </tr> ``` ##默认图片设置 ``` { title: '车辆照片', field: 'photos', sortable: true, width: '', hidden: false, formatter: function (v, r, i) { var himg = r.photos; if (himg != null) { himg = r.photos; } else { himg = '/Upload/image/Default.png'; } var imgstr = '<img src="' + himg + '" width="45" height="45" />'; return imgstr; } }, ``` ##添加时上传方法 ``` // 初始化Web Uploader车辆图片 var uploader = WebUploader.create({ // 选完文件后，是否自动上传。 auto: true, // swf文件路径 swf: '/script/webuploader/Uploader.swf', // 文件接收服务端。 server: '/No1_cheliangxinxi/ashx/No1_cheliangxinxiHandler.ashx?json={"action":"addimg"}', // 选择文件的按钮。可选。 // 内部根据当前运行是创建，可能是input元素，也可能是flash. pick: { id: top.$('#filePicker'), multiple: false }, //fileNumLimit: 1, // 只允许选择图片文件。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } }); // 文件上传成功 uploader.on('uploadSuccess', function (file, response) { var $li = $('<div id="' + file.id + '" class="file-item thumbnail">' + '<img>' + '</div>'), $img = $li.find('img'), $list = top.$('#fileList'); // $list为容器jQuery实例 $list.html(""); $list.append($li); // 创建缩略图 // 如果为非图片文件，可以不用调用此方法。 // thumbnailWidth x thumbnailHeight 为 100 x 100 uploader.makeThumb(file, function (error, src) { if (error) { $img.replaceWith('<span>不能预览</span>'); return; } $img.attr('src', src); }, 100, 100); top.$('#txt_photos').val(response.imgurl); alert(response.msg); }); ``` ##编辑时 ``` // 初始化Web Uploader车辆图片 top.$('#txt_photos').val(row.photos);//注意这里是jquery赋值，不是easyui赋值 //显示预览图 top.$(".uploader-list").append("<div class='file-item thumbnail'><img style='width:100px;height:100px;' src=" + row.photos + "></div>"); // 初始化Web Uploader S var uploader = WebUploader.create({ // 选完文件后，是否自动上传。 auto: true, // swf文件路径 swf: '/script/webuploader/Uploader.swf', // 文件接收服务端。 server: '/No1_cheliangxinxi/ashx/No1_cheliangxinxiHandler.ashx?json={"action":"addimg"}', // 选择文件的按钮。可选。 // 内部根据当前运行是创建，可能是input元素，也可能是flash. pick: { id: top.$('#filePicker'), multiple: false }, //fileNumLimit: 1, // 只允许选择图片文件。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } }); // 文件上传成功 uploader.on('uploadSuccess', function (file, response) { var $li = $('<div id="' + file.id + '" class="file-item thumbnail">' + '<img>' + '</div>'), $img = $li.find('img'), $list = top.$('#fileList'); // $list为容器jQuery实例 $list.html(""); $list.append($li); // 创建缩略图 // 如果为非图片文件，可以不用调用此方法。 // thumbnailWidth x thumbnailHeight 为 100 x 100 uploader.makeThumb(file, function (error, src) { if (error) { $img.replaceWith('<span>不能预览</span>'); return; } $img.attr('src', src); }, 100, 100); top.$('#txt_photos').val(response.imgurl); //alert(response.msg); top.$.messager.alert('注意', response.msg); }); ```