需要上传图片的一个操作选择了WebUploader这个插件来实现，具体的实现过程如下。
js代码：
1、引入js、css文件:
2、上传代码：
(function ($) { // 当domReady的时候开始初始化 $(function () { var $wrap = $('.uploader-list-container'), // 图片容器 $queue = $('
');
}
return;
} else if (!WebUploader.Uploader.support()) {
alert('Web Uploader 不支持您的浏览器！');
return;
}
// 实例化
uploader = WebUploader.create({
pick: {
id: '#filePicker-2',
label: '点击选择图片'
},
formData: {
houseId:'@(Model)'
},
dnd: '#dndArea',
paste: '#uploader',
swf: '/lib/webuploader/0.1.5/Uploader.swf',
chunked: false,
chunkSize: 512 * 1024,
//server: 'http://lib.h-ui.net/webuploader/0.1.5/server/fileupload.php',
server: '/House/UploadPic',
// runtimeOrder: 'flash',
// accept: {
// title: 'Images',
// extensions: 'gif,jpg,jpeg,bmp,png',
// mimeTypes: 'image/*'
// },
// 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开。
disableGlobalDnd: true,
fileNumLimit: 300,
fileSizeLimit: 200 * 1024 * 1024, // 200 M
fileSingleSizeLimit: 50 * 1024 * 1024 // 50 M
});
// 拖拽时不接受 js, txt 文件。
uploader.on('dndAccept', function (items) {
var denied = false,
len = items.length,
i = 0,
// 修改js类型
unAllowed = 'text/plain;application/javascript ';
for (; i < len; i++) {
// 如果在列表里面
if (~unAllowed.indexOf(items[i].type)) {
denied = true;
break;
}
}
return !denied;
});
uploader.on('dialogOpen', function () {
console.log('here');
});
// uploader.on('filesQueued', function() {
// uploader.sort(function( a, b ) {
// if ( a.name < b.name )
// return -1;
// if ( a.name > b.name )
// return 1;
// return 0;
// });
// });
uploader.on('uploadSuccess', function (file, response) {
if (response.status!="Ok") {
alert(response.errorMsg);
showError(response.errorMsg);
}
//var imgurl = response_raw; //上传图片的路径
//alert(imgurl);
});
// 添加“添加文件”的按钮，
uploader.addButton({
id: '#filePicker2',
label: '继续添加'
});
uploader.on('ready', function () {
window.uploader = uploader;
});
//当有文件添加进来时执行，负责view的创建
function addFile(file) {
var $li = $('' + file.name + '
' + '' + '' + '
' +
'删除' +
'向右旋转' +
'向左旋转
').appendTo($li),
$prgress = $li.find('p.progress span'),
$wrap = $li.find('p.imgWrap'),
$info = $(''),
showError = function (code) {
switch (code) {
case 'exceed_size':
text = '文件大小超出';
break;
case 'interrupt':
text = '上传暂停';
break;
default:
text = '上传失败，请重试';
break;
}
$info.text(text).appendTo($li);
};
if (file.getStatus() === 'invalid') {
showError(file.statusText);
} else {
//todo lazyload
$wrap.text('预览中');
uploader.makeThumb(file, function (error, src) {
var img;
if (error) {
$wrap.text('不能预览');
return;
}
if (isSupportBase64) {
img = $('3、坑1:上传地址配置在 WebUploader.create 中的 server 属性中
4、坑2：提交到服务器端的图片必须有一个houseId，该数据配置在WebUploader.create 中formData属性中
5、坑3：如果上传成功，则与服务器的交互定义方式：
uploader.on('uploadSuccess', function (file, response) { if (response.status!="Ok") { alert(response.errorMsg); showError(response.errorMsg); } });
6、服务器的接收：
public ActionResult UploadPic(long houseId, HttpPostedFileBase file) { string cacleFileName = CacleMD5.CalcMD5(file.InputStream); string ext = Path.GetExtension(file.FileName); string path = "/upload/" + DateTime.Now.ToString("yyyy/MM/dd") + "/" + cacleFileName + ext; string fullPath = HttpContext.Server.MapPath("~" + path);//拿到服务器上的绝对路径。 new FileInfo(fullPath).Directory.Create();//尝试创建可能不存在的文件夹 file.InputStream.Position = 0;//指针复位 file.SaveAs(fullPath); houseSer.AddNewHousePic(new HousePicDTO { HouseId = houseId, Url = path, ThumbUrl = path }); //将文件保存，保存到该系统的根目录下，以HouseId为文件名。 //file.SaveAs(HttpContext.Server.MapPath("~/" + houseId + Path.GetExtension(file.FileName))); // return Content("ok"); return Json(new AjaxResult { Status = "Ok" }); }
参考：
1）、http://pdf-lib.org/Home/Details/471
2）、https://github.com/fex-team/webuploader/issues/2258
3）、http://www.alicartoon.com/2016/08/01/webuploader-shang-chuan-da-tu-pian-fen-pian-shang-chuan-da-tu-pian/
4）、http://www.cnblogs.com/wisdo/p/6159761.html
5）、http://www.open-open.com/lib/view/open1421293847328.html