//上传多文件 functionUploadMultiFile() { 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;50px;margin-right:2px;"><img src="http://t.zoukankan.com/Content/img/filetype/'+ file.ext + '.png" style="40px;height:40px;"></div> <div class="cancel"> <a href="https://tool.4xseo.com/article/101301.html"></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 role="progressbar" style=" 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)); } });