Web Uploader文件（图片）上传使用方法

前言

Web Uploader是上传问价和图片的一种实现方式，Web Uploader是一套的成熟且完善的上传插件js。具体api可以在官网查看。
http://www.jq22.com/yanshi2665

html页面

在页面可以给按钮或者a标签，具体看项目需要来决定。这里只给一种方法。

这里是用css来作为标识，具体怎样调用在js详细写出来。

Web Uploader上传js

var files = new Array();
var _uploader = new Array(4);
//文件上传
$('.imgPicker').each(
    function (index, el) {
        var fileType = el.id.split("_")[1];
        var uploader = WebUploader.create({
            auto: true, // 选完文件后，是否自动上传
            swf: 'js/Uploader.swf', // swf文件路径--这里相当于ajax中的url，就是调用后端接口的
            duplicate : true,// 这里要特别注意下，这个代表是否可以重复上传同一文件（图片），如果不写默认为false
            fileSizeLimit: 1024 * 1024*10,//限制pdf小于50M--里代表限制上传文件（图片）大小
            server: conf.ctx + '/upload/fileUpload.do', // 文件接收服务端
            pick: el, // 选择文件的按钮。可选
            // 只允许选择pdf文件。
            accept: {
                title: 'Images',
                extensions: 'pdf',
                mimeTypes: 'application/pdf'
            },
            formData: {
                fileType: fileType
            }
        });
        _uploader[index] = uploader;
        uploader.on('fileQueued', function (file) {
            var $list = $(el).siblings('.uploader-list'), $img = $list
                .find('img');
            $list.find('div').attr('id', file.id);
          
        });
        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id), $percent = $li
                .find('.progress span');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<p class="progress"><span></span></p>')
                    .appendTo($li).find('span');
            }
            $li.find('p.state').text('上传中');
            $percent.css('width', percentage * 100 + '%');
        });

        // 文件上传成功，给item添加成功class, 用样式标记上传成功。
        uploader.on('uploadSuccess', function (file, res) {

            var result = JSON.parse(res._raw);
            for (var k = 0; k < files.length; k++) {
                var file = JSON.parse(files[k]);
                if (file.imgType == result.imgType) {
                    files.remove(files[k]);
                    break;
                }
            }
            files.push(res._raw);
            $('#' + file.id).addClass('upload-state-done');
        });

        // 文件上传失败，显示上传出错。
        uploader.on('uploadError', function (file) {
        	toastr["error"]("操作失败！", "温馨提示");
        });

        // 完成上传完了，成功或者失败，先删除进度条。
        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').remove();
            toastr["success"]("上传完成！", "温馨提示");
            //--------------------------------------------------------------------------
            //到这里就是上传完成了 ，下面的是我对上传完成后的文件做处理，方便取到该文件的服务器地址以及id等信息，
            // 如果不需要可以放弃一下代码


            pdfArray = []
            var vehicleImages = $("input[name='vehicleImages']").val();
            var wwqImgNum = 0;
            $.each(files, function (index, item) {
                var beforePdf = {};
                if (isNotBlank(item)) {
                    image = $.parseJSON(item);
                        wwqImgNum++;
                        beforePdf.type = image.imgType;// 从后台的反参中拿到已经生成的类型
                        beforePdf.pdfId = image.fileId;// 从后台的反参中拿到已经生文件id
                        beforePdf.pdfUrl = image.imgUrl;// 从后台的反参中拿到已经生成路径，这个很重要。
                        pdfArray.push(JSON.stringify(beforePdf));// 然后各种信息push到集合中
                        console.log(image)
                }
            })
           var paramm = [];
           paramm.pdfArray = pdfArray;
           $("input[name='vehicleImages']").val(JSON.stringify(pdfArray));// 这里是将文件类型转化为String类型
           $("#fileName").val(file.source.name)//这里可以拿到本地上传文件的名称。
          console.log(file.source.name)
        });
    });

Web Uploader总结（遇到的坑）

Web Uploader总体来说也属于简单容易上手的上传js插件。
总结下自己使用 Web Uploader中遇到的坑：
Web Uploader是不可以显示上传文件（图片）的本地路径的，它只可以显示出来本地上传文件（图片）的名字。
在测试过程中发现一个问题，就是当前文件（图片）上传过以后，如果不刷新页面那么就不能进行第二次上传，解决方法就是增加一个属性（duplicate : true,）。

结尾

总之Web Uploader 还是一个比较成熟的上传插件，也比较容易上手。

当日矫情：
纵然万劫不复，纵然相思入骨，我也待你眉眼如初，岁月如故--------网易云