<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title></head><body><script src="~/Scripts/jquery-1.10.2.min.js"></script><link href="~/Content/webuploader.css" rel="stylesheet" /><script src="~/Scripts/webuploader.js"></script><script src="~/Scripts/bootstrap.min.js"></script><div id="uploader" class="wu-example"> <!--用来存放文件信息--> <div id="thelist" class="uploader-list"></div> <div class="btns"> <div id="picker">选择文件</div> <input id="ctlBtn" type="button" value="开始上传" class="btn btn-default" /> </div></div></body></html><script> var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../"; var GUID = WebUploader.Base.guid();//一个GUID $(function () { var $ = jQuery; var $list = $('#thelist'); var uploader = WebUploader.create({ // 选完文件后，是否自动上传。 auto: false, // swf文件路径 swf: applicationPath '../Content/Uploader.swf', // 文件接收服务端。 server: applicationPath 'Home/Upload', // 选择文件的按钮。可选。 // 内部根据当前运行是创建，可能是input元素，也可能是flash. pick: '#picker', chunked: true,//开始分片上传 chunkSize: 2048000,//每一片的大小 formData: { guid: GUID //自定义参数，待会儿解释 }, // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！ resize: false }); // 当有文件被添加进队列的时候 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="width: 0%">' '</div>' '</div>').appendTo($li).find('.progress-bar'); } $li.find('p.state').text('上传中'); $percent.css('width', percentage * 100 '%'); }); // 文件上传成功，给item添加成功class, 用样式标记上传成功。 uploader.on('uploadSuccess', function (file, response) { debugger; $('#' file.id).find('p.state').text('已上传'); $.post('Home/Merge', { guid: GUID, fileName: file.name }, function (data) { $("#uploader .state").html("上传成功..."); }); }); // 文件上传失败，显示上传出错。 uploader.on('uploadError', function (file) { $('#' file.id).find('p.state').text('上传出错'); }); // 完成上传完了，成功或者失败，先删除进度条。 uploader.on('uploadComplete', function (file) { $('#' file.id).find('.progress').fadeOut(); }); //所有文件上传完毕 uploader.on("uploadFinished", function () { //提交表单 }); //开始上传 $("#ctlBtn").click(function () { uploader.upload(); }); });</script>
评论