百度开源上传组件webuploader 可上传多文件并带有进度条
//上传多文件 function UploadMultiFile() { var uploader = WebUploader.create({ // 选完文件后,是否自动上传。 auto: true, // swf文件路径 swf: '~/Content/libs/webuploader/Uploader.swf', // 文件接收服务端。 server: '../../Document/Art/UploadFile', // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: '#picker', // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传! resize: false }); // 当有文件被添加进队列的时候 uploader.on('fileQueued', function (file) { var itemTemplate = ""; var fileSize = parseInt(file.size / 1024); if (fileSize >= 1024) fileSize = parseInt(fileSize / 1024) + "MB" else fileSize = parseInt(fileSize) + "KB" itemTemplate = '<div id="' + file.id + '" class="uploadify-queue-item">\ <div style="float:left;width:50px;margin-right:2px;"><img src="/Content/img/filetype/'+ file.ext + '.png" style="width:40px;height:40px;"></div>\ <div class="cancel">\ <a href=""></a>\ </div>\ <span class="fileName">'+ file.name + ' (' + fileSize + ')</span><span class="data"></span>\ </div>'+ itemTemplate; $(".border").prepend(itemTemplate); $(".drag-tip").remove(); }); // 文件上传过程中创建进度条实时显示。 uploader.on('uploadProgress', function (file, percentage) { var $li = $('#' + file.id), $percent = $li.find('.uploadify-progress .uploadify-progress-bar'); // 避免重复创建 if (!$percent.length) { $percent = $('<div class="uploadify-progress uploadify-progress-striped active">' + '<div class="uploadify-progress-bar" role="progressbar" style="width: 0%">' + '</div>' + '</div>').appendTo($li).find('.uploadify-progress-bar'); } $li.find('.data').text(' 上传中').css("color", "red");; $percent.css('width', percentage * 100 + '%'); }); //文件成功、失败处理 uploader.on('uploadSuccess', function (file) { $('#' + file.id).find('.data').text(' 上传成功').css("color","green"); }); uploader.on('uploadError', function (file) { $('#' + file.id).find('.data').text(' 上传出错'); }); uploader.on('uploadComplete', function (file) { $('#' + file.id).find('.uploadify-progress').fadeOut(); }); }
<div style="height: 38px;"> <div id="uploader" class="wu-example"> <!--用来存放文件信息--> <div id="fileList" class="uploader-list"></div> <div class="btns"> <div id="picker">选择文件</div> </div> </div> </div> <div class="border" style="height: 200px; border-radius: 5px;overflow-y:scroll"> <div class="drag-tip" style="text-align: center; padding-top: 80px;"> <h1 style="color: #666; font-size: 20px; font-family: Microsoft Yahei; padding-bottom: 2px;">您的浏览器不支持拖拽功能,请点击按钮上传。</h1> <p style="color: #666; font-size: 12px;"> (您的浏览器不支持此拖拽功能) </p> </div> </div>
注意:使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF
<!--引入CSS--> <link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css"> <!--引入JS--> <script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>
补充上传成功后返回值的两方结合的问题:
uploader.on('uploadSuccess', function (file, response) { if (response.type == 1 && response.errorcode == 0) { var arrData = []; var sort = 0; var inputValue = $("#fileData").val(); if (inputValue != "") { var jsonObj = JSON.parse(inputValue); for (var i = 0; i < jsonObj.length; i++) { sort = i + 1; jsonObj[i]["SortCode"] = sort; arrData.push(jsonObj[i]); } } var newAdd = {}; newAdd["FileName"] = file.name; newAdd["FilePath"] = response.message; newAdd["FileSize"] = parseInt(file.size / 1024); newAdd["FileExtensions"] = file.ext; newAdd["FileType"] = file.type; newAdd["SortCode"] = sort + 1; arrData.push(newAdd); $("#fileData").val(JSON.stringify(arrData)); } });
微信号:jamesworkshop 学习QQ群:364976091