【图片上传插件WebUploader的坑】需要上传图片的一个操作选择了WebUploader这个插件来实现，具体的实现过程如下。
js代码：
1、引入js、css文件:
2、上传代码：
(function ($) {
// 当domReady的时候开始初始化
$(function () {
var $wrap = $('.uploader-list-container'),// 图片容器
$queue = $('')
.appendTo($wrap.find('.queueList')),// 状态栏，包括进度和控制按钮
$statusBar = $wrap.find('.statusBar'),// 文件总体选择信息。
$info = $statusBar.find('.info'),// 上传按钮
$upload = $wrap.find('.uploadBtn'),// 没选择文件之前的内容。
$placeHolder = $wrap.find('.placeholder'),$progress = $statusBar.find('.progress').hide(),// 添加的文件数量
fileCount = 0,// 添加的文件总大小
fileSize = 0,// 优化retina, 在retina下这个值是2
ratio = window.devicePixelRatio || 1,// 缩略图大小
thumbnailWidth = 110 * ratio,
thumbnailHeight = 110 * ratio,// 可能有pedding, ready, uploading, confirm, done.
state = 'pedding',// 所有文件的进度信息，key为file id
percentages = {},
// 判断浏览器是否支持图片的base64
isSupportBase64 = (function () {
var data = https://www.it610.com/article/new Image();
var support = true;
data.onload = data.onerror = function () {
if (this.width != 1 || this.height != 1) {
support = false;
}
}
data.src ="data:image/gif;
base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
return support;
})(),// 检测是否已经安装flash，检测flash的版本
flashVersion = (function () {
var version;
try {
version = navigator.plugins['Shockwave Flash'];
version = version.description;
} catch (ex) {
try {
version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash')
.GetVariable('$version');
} catch (ex2) {
version = '0.0';
}
}
version = version.match(/\d+/g);
return parseFloat(version[0] + '.' + version[1], 10);
})(),supportTransition = (function () {
var s = document.createElement('p').style,
r = 'transition' in s ||
'WebkitTransition' in s ||
'MozTransition' in s ||
'msTransition' in s ||
'OTransition' in s;
s = null;
return r;
})(),// WebUploader实例
uploader;
if (!WebUploader.Uploader.support('flash') && WebUploader.browser.ie) {// flash 安装了但是版本过低。
if (flashVersion) {
(function (container) {
window['expressinstallcallback'] = function (state) {
switch (state) {
case 'Download.Cancelled':
alert('您取消了更新！')
break;
case 'Download.Failed':
alert('安装失败')
break;
default:
alert('安装已成功，请刷新！');
break;
}
delete window['expressinstallcallback'];
};
var swf = 'expressInstall.swf';
// insert flash object
var html = '
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
转载于:https://www.cnblogs.com/fly-cjh/p/7108107.html
推荐阅读
