使用WebUploader进行文件图片上传

 

官方文档：http://fex.baidu.com/webuploader/getting-started.html

 

引入Webuploader的css和js文件，下载地址：http://fex.baidu.com/webuploader/download.html

把下载的整个文件夹添加的项目中 

 

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css">

<!--引入JS-->
<script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>

 

 

 

下面这种方式默认是不能重复上传的 如果要能够重复上传一张图片 需要增加属性 duplicate :true,

• duplicate {Boolean} [可选] [默认值：undefined] 

  去重， 根据文件名字、文件大小和最后修改时间来生成hash Key.

 

 

如果要设置只能选择一张图片上传，把pick部分修改成

 pick: {
                id:'#filePicker',
                multiple: false,
            },

 

简单demo

 

<div>
        <!--dom结构部分-->
            <!--用来存放item-->
            <div id="filePicker">选择图片</div>
    </div>

    <table class="vehicleImgs">
        <tr>
            <#list vehicleImg as p>
            <td>
                <img  src="${p!}" alt="预览"/>
                <span class="del_img">删除</span>
                <input type="hidden" name="vehicleImgs" value="${p!}"/>
            </td>
            </#list>
        </tr>
    </table>

    <script>
        var uploadPicsUrl = "../common/o_swfPicsUpload.do";
        // 初始化Web Uploader
        var uploader = WebUploader.create({

            // 选完文件后，是否自动上传。
            auto: true,

            //后台接收的name名
            fileVal:"Filedata",
            // swf文件路径
            swf: '${base}/thirdparty/webuploader/Uploader.swf',

            // 文件接收服务端。
            server: uploadPicsUrl,

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#filePicker',
　　　　　　　　
　　　　　　　//允许重复上传　
　　　　　　　duplicate:true,　

            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
         // 当有文件添加进来的时候
           uploader.on( 'fileQueued', function( file ) {
              uploader.upload();
          });

       // 文件上传过程中创建进度条实时显示。
           uploader.on( 'uploadProgress', function( file, percentage ) {
          });


        // 文件上传成功，response为服务器返回的数据。
        uploader.on( 'uploadSuccess', function( file,response ) {
            console.log(response);
            var imgUrl=response._raw;  
            var str =$(".vehicleImgs tr").html();
            str += "<td >";
            str += "            <img  src="+imgUrl+" alt=\"预览\"/>";
            str += "            <span class=\"del_img\">删除</span>";
            str += "            <input type=\"hidden\" name=\"vehicleImgs\" value="+imgUrl+"/>";
            str += "        </td>";

            $(".vehicleImgs tr").html(str);

        });
// 文件上传失败，显示上传出错。
uploader.on( 'uploadError', function( file ) {
});
/**
 * 验证文件格式以及文件大小
 */
uploader.on("error", function (type) {
    if (type == "Q_TYPE_DENIED") {
    } else if (type == "Q_EXCEED_SIZE_LIMIT") {
    } else if (type == "F_EXCEED_SIZE") {
    }else {
    }
});

// 完成上传完了，成功或者失败，先删除进度条。
uploader.on( 'uploadComplete', function( file ) {
    $(".del_img").on('click',function () {
        $(this).parent().remove();
    })
});

uploader.on( 'all', function( type ) {
    if ( type === 'startUpload' ) {
        state = 'uploading';
    } else if ( type === 'stopUpload' ) {
        state = 'paused';
    } else if ( type === 'uploadFinished' ) {
        state = 'done';
    }

});

$(".del_img").on('click',function () {
    $(this).parent().remove();
})
</script>

 

 

如果要只能选择固定格式的文件 修改 

mimeTypes 


比如只能word03和07 可以写：

mimeTypes: 'application/msword,application/application/vnd.openxmlformats-officedocument.wordprocessingml.document'

 

更多MimeTypes数值表 参考：https://www.cnblogs.com/pxblog/p/14454262.html