Web Uploader是百度提供的。
1:下载:http://fex.baidu.com/webuploader/(官方下载/示例)
2:使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF。
///src值根据文件在项目中的位置而定 <link href="~/Content/webuploader/webuploader.css" rel="stylesheet" /> <script src="~/Content/webuploader/webuploader.js"></script>
<!--SWF在初始化的时候指定,在后面将展示-->
3、html部分:
<div id="uploadWindow" class="container-fluid"> <div class="windowTop" style="border-bottom:1px solid #808080;"> <div id="filePicker" style="50%;float:left;padding:5px 3px;"> 选择文件 </div> <button id="ctlBtn" class="button-upload">开始上传</button> <button id="closeUploadWindow" class="button-upload cl">关闭</button> </div> <div class="windowCenter">文件上传示例:</div> <div class="windowBottom"> <div id="selectedFiles" class="wu-example"> <!--用来存放文件信息--> <div id="fileList" class="uploader-list"></div> </div> </div> </div>
4、js部分
var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";
// 上传初始化 function initUpload() { //文件上传 var $ = jQuery, $list = $('#fileList'), $btn = $('#ctlBtn'), state = 'pending', uploader; uploader = WebUploader.create({ auto: false,// 选完文件后,是否自动上传。 // 不压缩image resize: false, // swf文件路径 swf: applicationPath + '~/Content/webuploader/Uploader.swf', // 文件接收服务端。 server: '/Home/UploadFiles', // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: '#filePicker', //accept: { // title: "RFA", // extensions: "rfa", // mimeTypes: ".rfa,application/octet-stream", //}, chunked: true,// 开起分片上传。 threads: 1, // 上传并发数。允许同时最大上传进程数。 method: 'POST', // 文件上传方式,POST或者GET。 //fileSizeLimit: 1024 * 1024 * 100 * 100, //验证文件总大小是否超出限制, 超出则不允许加入队列。 //fileSingleSizeLimit: 1024 * 1024 * 100, //验证单个文件大小是否超出限制, 超出则不允许加入队列。 //fileVal: 'upload', // [默认值:'file'] 设置文件上传域的name。 }); // 当有文件添加进来的时候 uploader.on('fileQueued', function (file) { $list.append('<div id="' + file.id + '" class="item">' + '<h4 class="info">' + file.name + '</h4>' + '<p class="state">等待上传...</p>' + '</div>'); }); // 文件上传过程中创建进度条实时显示。 uploader.on('uploadProgress', function (file, percentage) { var $li = $('#' + file.id), $percent = $li.find('.progress .progress-bar'); // 避免重复创建 if (!$percent.length) { $percent = $('<div class="progress progress-striped active">' + '<div class="progress-bar" role="progressbar" style=" 0%">' + '</div>' + '</div>').appendTo($li).find('.progress-bar'); } $li.find('p.state').text('上传中'); $percent.css('width', percentage * 100 + '%'); }); uploader.on('uploadSuccess', function (file, response) { $('#' + file.id).find('p.state').text(response.info); // fileurl = response.data; //上传文件的路径 // }); uploader.on('uploadError', function (file, response) { debugger $('#' + file.id).find('p.state').text('上传出错 ' + response); }); uploader.on('uploadComplete', function (file, response) { $('#' + file.id).find('.progress').fadeOut(); }); //当所有文件上传完成时触发 uploader.on('uploadFinished', function () {
这里是一个异步回调函数,对文件的一个处理。后台通过单独开一个线程进行处理。详情看多线程分类里相关文档里 // webuploaderCallBack(); }); uploader.on('all', function (type) { if (type === 'startUpload') { state = 'uploading'; } else if (type === 'stopUpload') { state = 'paused'; } else if (type === 'uploadFinished') { state = 'done'; } if (state === 'uploading') { $btn.text('上传中...'); } else { $btn.text('开始上传'); } }); $btn.on('click', function () { var type="010"; var onelevel = $("#onelevel option:selected").attr("id"); var twolevel = $("#twolevel option:selected").attr("id"); var threelevel = $("#threelevel option:selected").attr("id"); if (threelevel != undefined) { type = threelevel; } else { if (twolevel != undefined) { type = twolevel; } else { if (onelevel != undefined) { type = onelevel; } } } // 初始化以后添加 uploader.options.formData.filetype = type; if (state === 'uploading') { uploader.stop(); } else { uploader.upload(); } }); ///取消上传 $('.uploader-list').on('click', '.btn-remove', function () { debugger // 从文件队列中删除某个文件id file_id = $(this).data('id'); uploader.removeFile(file_id, true); // 从队列中删除 //console.log(uploader.getFiles()) // 队列显示还在 其实已经删除 }); //重试上传,重试指定文件,或者从出错的文件开始重新上传。 $('.uploader-list').on('click', '.upload-item__progress span', function () { debugger uploader.retry($(this).data('file')); }); };
5、常见问题及解决方案:
待写