java一次多选批量上传图片_WEB版一次选择多个图片进行批量上传(WebUploader)的解决方案...

var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";

$(function () {var $ =jQuery,

$list= $('#fileList'),//优化retina, 在retina下这个值是2

ratio = window.devicePixelRatio || 1,//缩略图大小

thumbnailWidth= 90 *ratio,

thumbnailHeight= 90 *ratio,//Web Uploader实例

uploader;

uploader=WebUploader.create({//选完文件后，是否自动上传。

auto:false,

disableGlobalDnd:true,//swf文件路径

swf: applicationPath + 'Script/webuploader/Uploader.swf',//文件接收服务端。

server:'UploaderFileByBaidu.ashx',//选择文件的按钮。可选。//内部根据当前运行是创建，可能是input元素，也可能是flash.

pick: '#filePicker',//只允许选择图片

accept: {

title:'Images',

extensions:'gif,jpg,jpeg,bmp,png',

mimeTypes:'image/*'}

});//当有文件添加进来的时候

uploader.on('fileQueued', function (file) {var $li =$('

' +

'' +

'

'),

$img= $li.find('img');//$list为容器jQuery实例

$list.append($li);//创建缩略图//如果为非图片文件，可以不用调用此方法。//thumbnailWidth x thumbnailHeight 为 90x 90

uploader.makeThumb(file, function (error, src) {if(error) {

$img.replaceWith('不能预览');return;

}

$img.attr('src', src);

}, thumbnailWidth, thumbnailHeight);

});//文件上传过程中创建进度条实时显示。

uploader.on('uploadProgress', function (file, percentage) {var $li = $('#' +file.id),

$percent= $li.find('.progress span');//避免重复创建，如果不想显示图4那样的进度条，可以使用下面的代码，把现在使用的注释掉。

/*if (!$percent.length) {

$percent = $('

.appendTo($li)

.find('span');

}*/

if (!$percent.length) {

$percent= $('

' +

'

' +

'

' +

'

').appendTo($li).find('.progress-bar');

}

$percent.css('width', percentage * 100 + '%');

});//文件上传成功，给item添加成功class, 用样式标记上传成功。

uploader.on('uploadSuccess', function (file, response) {

$('#' + file.id).addClass('upload-state-done');

});//文件上传失败，显示上传出错。

uploader.on('uploadError', function (file) {var $li = $('#' +file.id),

$error= $li.find('div.error');//避免重复创建

if (!$error.length) {

$error= $('

}

$error.text('上传失败');

});//完成上传完了，成功或者失败，先删除进度条。

uploader.on('uploadComplete', function (file) {

$('#' + file.id).find('.progress').remove();

});//所有文件上传完毕

uploader.on("uploadFinished", function () {//提交表单

});//开始上传

$("#ctlBtn").click(function () {

uploader.upload();

});//显示删除按钮

$(".cp_img").live("mouseover", function () {

$(this).children(".cp_img_jian").css('display', 'block');

});//隐藏删除按钮

$(".cp_img").live("mouseout", function () {

$(this).children(".cp_img_jian").css('display', 'none');

});//执行删除方法，只是从客户端删除

$list.on("click", ".cp_img_jian", function () {var Id = $(this).parent().attr("id");

uploader.removeFile(uploader.getFile(Id,true));

$(this).parent().remove();

});

});

图片上传示例：

开始上传