單圖上傳 · 翼通系統開發

##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); }); ```