百度开源上传组件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();
    }); 
}

选择文件

您的浏览器不支持拖拽功能，请点击按钮上传。

（您的浏览器不支持此拖拽功能）

注意:使用Web Uploader文件上传需要引入三种资源：JS, CSS, SWF

补充上传成功后返回值的两方结合的问题：
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));
}
});

参考文章：http://blog.ncmem.com/wordpress/2023/09/11/%e7%99%be%e5%ba%a6%e5%bc%80%e6%ba%90%e4%b8%8a%e4%bc%a0%e7%bb%84%e4%bb%b6webuploader/
欢迎入群一起讨论