WebUploader——一个页面多个实例上传图片

时间:2021-12-26 07:52:02

WebUploader官方例子看的不是很清楚,自己也是费了点劲自己写了一下。

需求:一个单页需要多个实例来上传,一次可上传多张

条件:后台接收C#

首先:引入webuploader     webuploader.css   webuploader.js

html:<div class="filePicker">上传</div>

Jquery:$(function(){

uploader = WebUploader.create({
auto: true,
swf: '/Swf/Uploader.swf',
server: '',//后台接收图片的url (我用的是C#)
fileVal: 'upload',
pick: '.filePicker',//html class
resize: false,
duplicate: true,//可以重复上传 但是筛选不了重复图片
});
uploader.on('uploadSuccess', function (file, data) {
var uploaderId = '#rt_' + file.source.ruid;//每个实例的唯一ID (自己写的时候这是个突破口,时间主要花在这个上面了.... 下面可以通过这个*发挥了)
*发挥空间
});
uploader.on('uploadError', function (file) {
var $li = $('#' + file.id),
$error = $li.find('div.error');
if (!$error.length) {
$error = $('<div class="error"></div>').appendTo($li);
}
$error.text('上传失败!!!');
}); });

  

后台接收文件代码:C#

{//上传资料
ResultModelData result = new ResultModelData();
string fileName = string.Empty;
string savePath = string.Empty;
var fileSize = 0;
if (HttpContext.Current.Request.Files.Count > 0)
{
using (System.IO.Stream s = HttpContext.Current.Request.Files[0].InputStream)
{
fileSize = HttpContext.Current.Request.Files[0].ContentLength;
fileName = HttpContext.Current.Request.Files[0].FileName;
if (Bas_FileBLL.UploadAudit(s, fileName, out savePath))
{ result.Code = 1;
result.Message = TipCodeType.TipCode.操作成功.ToString();
result.Data = new { size = fileSize, fileName = fileName, path = savePath };
return result;
}
result.Code = -1;
result.Message = "上传失败";
return result;
}
}
result.Code = -1;
result.Message = "文件为空";
return result;
}

  

WebUploader——一个页面多个实例上传图片

WebUploader——一个页面多个实例上传图片

WebUploader——一个页面多个实例上传图片