本次開發采用uploader插件 需要在前臺引入 使用該插件的 Uploader.swf文件（用於使用時js指向）

在wingsUploader.js 中對uploader插件進行設置

(function($) {  //
    // 設置屬性
    var uploader;
    var ratio = window.devicePixelRatio || 1; //用於縮略圖
    // var thumbnailWidth = 50 * ratio;   //縮略圖的寬
    // var thumbnailHeight = 50 * ratio;  //縮略圖的高

    /**
     * 構造函數
     
 
*/
    $.fn.wingsUploader = function(options) {

        // 設置組件參數
        var opts = $.extend({}, $.fn.wingsUploader.defaults, options);
        opts.pick = "#" + this[0].id;
        successFun = opts.successfun;
        errorFun = opts.errorFun;

        // 初始化Web Uploader
        uploader = WebUploader.create(opts);

        
 
// 創建文件顯示位置
            // 當有文件被添加進隊列的時候
        this.pictureShow = function(id){
            uploader
                    .on(
                            ‘fileQueued‘,
                            function(file) {

                                var $li = $(
                                        ‘<div id="‘ + file.id + ‘" class="file-item thumbnail">‘ +
                                            ‘<img>‘ +
                                            //
 
 ‘<div class="info">‘ + file.name
                                            // + ‘</div>‘ +
                                        ‘</div>‘
                                        ),
                                    $img = $li.find(‘img‘);//創建縮略圖
                                 
                                // $list為容器jQuery實例
                                $(id).html( $li );
                                
                                /* if(closeUploader()){ */
                                     // 創建縮略圖
                                // 如果為非圖片文件，可以不用調用此方法。
                                // thumbnailWidth x thumbnailHeight 為 100 x 100
                                closeUploader(uploader);
                                uploader.makeThumb( file, function( error, src ) {
                                    if ( error ) {
                                        $img.replaceWith(‘<span>不能預覽</span>‘);
                                        return;
                                    }

                                    $img.attr( ‘src‘, src );
                                // }, thumbnailWidth, thumbnailHeight );
                                }); 
                            });}
            // 刪除文件
            /*
             * $(id).on("click", ".stateweq", function() { var $ele = $(this);
             * var id = $ele.closest("div").find(".hdid").text(); var file =
             * uploader.getFile(id); uploader.removeFile(file); $(‘#‘ +
             * file.id).remove(); });
             */
        uploader.on("error", function(type){ //設置文件上傳大小不能超過默認值
             if(type == "Q_TYPE_DENIED"){
                 dialogMsg( "myModal", "messageP", "請上傳JPG,PNG格式文件");    
            } else if(type == "F_EXCEED_SIZE"){
                 dialogMsg("myModal","messageP","文件大小不能超過8M");
            }
        })
            // 文件上傳過程中創建進度條實時顯示。
            /*
             * uploader .on( ‘uploadProgress‘, function(file, percentage) { var
             * $li = $(‘#‘ + file.id), $percent = $li .find(‘.progress
             * .progress-bar‘);
             *  // 避免重復創建 if (!$percent.length) { $percent = $( ‘<div
             * class="progress progress-striped active">‘ + ‘<div
             * class="progress-bar" role="progressbar" style="width: 0%">‘ + ‘</div>‘ + ‘</div>‘)
             * .appendTo($li) .find(‘.progress-bar‘); }
             * 
             * $li.find(‘p.state‘).text(‘上傳中‘);
             * 
             * $percent.css(‘width‘, percentage * 100 + ‘%‘); });
             */

            // 文件上傳失敗會派送uploadError事件，成功則派送uploadSuccess事件。不管成功或者失敗，在文件上傳完後都會觸發uploadComplete事件。
            uploader.on(‘uploadSuccess‘, function(file) { // 成功後刷新頁面
                $(‘#‘ + file.id).find(‘span.state‘).text(‘已上傳‘);
                $(‘#‘ + file.id).find(‘.stateweq‘).remove();
                window.location.reload();
            });

            uploader.on(‘uploadError‘, function(file) { // 失敗後刷新頁面
                $(‘#‘ + file.id).find(‘span.state‘).text(‘上傳出錯‘);
                WingsDialog.alert("提示","logo信息保存失敗 請重新操作！",{
                    onhidden:function(){
                        window.location.reload();
                    }
                });
                
            });
        /*
         * uploader.on(‘error‘, function(handler) { if (handler ==
         * "Q_EXCEED_NUM_LIMIT") { alert("只能上傳一張圖片"); } });
         */
            uploader.on(‘uploadComplete‘, function(file) {
                $(‘#‘ + file.id).find(‘.progress‘).fadeOut();

            });
            /*如果上傳圖片同時 帶參數*/
            /*uploader.on(‘uploadBeforeSend‘, function(block, data) { 
                var proName = $("#proName").val();
                if(proName==""){
                    proName="defaultName";
                }
                block.file.name= proName; // 將存在file對象中的md5數據攜帶發送過去。
            }, 2);*/
        /* }; */
            // 完成上傳完了，成功或者失敗，先刪除進度條。
            uploader.on(‘uploadComplete‘, function(file) {
                $(‘#‘ + file.id).find(‘.progress‘).remove();
            });
        /*
         * // 創建圖片顯示位置 this.pictureShow = function(id) {
         *  }
         */
            /**/
        // 文件上傳開始事件
        this.fileStart = function() {
            uploader.upload();
        }
 　　　　//清空文件列表 例如重置按鈕可調用此方法 不能用頁面元素清空的方法因為清空後無法下次選擇圖片 
       this.reset=function(){
            uploader.reset();
        }
        return this;

    };

    // 默認設置
    $.fn.wingsUploader.defaults = {
        swf : ‘/gxyt/gxyt008/need/Uploader.swf‘, //指向Uploader.swf

        server : ‘‘, // 文件接收的服務端 
        pick : ‘‘, // 展示文件的id 
        auto : true, // 選完文件後是否自動上傳
        resize : false, // 不壓縮image, 默認如果是jpeg，文件上傳前會壓縮一把再上傳！  
}; })(window.jQuery);   
   function selectFile(file) { 
      var html = ‘‘, i = 0; $("#preview").html(‘<div class="upload_loading"></div>‘); 
      var funAppendImage = function() {
            if (file) { 
                   var reader = new FileReader() reader.onload = function(e) { 
                        html = html + ‘<div id="uploadList_‘ + i + ‘" class="upload_append_list"><p><strong>‘ + file.name + ‘</strong>‘ + ‘<a href="javascript:" class="upload_delete" title="刪除" data-index="‘ + i + ‘">刪除</a><br />‘ + ‘<img id="uploadImage_‘ + i + ‘" src="‘ + e.target.result + ‘" class="upload_image" /></p>‘ + ‘<span id="uploadProgress_‘ + i + ‘" class="upload_progress"></span>‘ + ‘</div>‘;
                          i++;
                          funAppendImage(); 
                        } 
                     reader.readAsDataURL(file); } else {
                            $("#preview").html(html); if (html) { // 刪除方法 $(".upload_delete").click( function() { FILE.funDeleteFile(files[parseInt($(this).attr( "data-index"))]); return false; }); 
                           // 提交按鈕顯示 $("#fileSubmit").show(); } else { // 提交按鈕隱藏 $("#fileSubmit").hide(); } } }; funAppendImage(); } /* 關閉上傳框窗口後恢復上傳框初始狀態 */     
           function closeUploader(uploader) {                
           //  移除所有縮略圖並將上傳文件移出上傳序列        
             for (var i = 0; i < uploader.getFiles().length-1; i++) {             
             //  將圖片從上傳序列移除            
               uploader.removeFile(uploader.getFiles()[i]);            
             // uploader.removeFile(uploader.getFiles()[i], true);           
             // delete uploader.getFiles()[i];             //  將圖片從縮略圖容器移除          
             /* *    var $li = $(‘#‘ + uploader.getFiles()[i].id); *             
         $li.off().remove(); */ return uploader.getFiles().length;       
          }          
           /* *         setState(‘pedding‘); */                
             //  重置文件總個數和總大小       /* *   fileCount = 0;         fileSize = 0; *         // 重置uploader，目前只重置了文件隊列         uploader.reset(); *         // 更新狀態等，重新計算文件總個數和總大小         updateStatus(); */     } // 創建上傳的文件 

怎樣傳文件的同時，傳遞參數 可uploader.on(‘uploadBeforeSend‘, function(block, data) { var proName = $("#proName").val();

                if(proName==""){
                    proName="defaultName";
                }
                block.file.name= proName; // 將存在file對象中的md5數據攜帶發送過去。
            }, 2);
該方法在文件發送前觸發  可攜帶參數 這裏是要傳遞logo圖片的同時，傳遞產品名稱由於後臺的接受限制又不需要獲取文件名 所以把產品名作為文件名傳遞但要註意的是 
如果 文件命令為aa.jpg   proName是 bb 那麽通過此方法將獲得proName的值為bb   但是如果proName為空值 那麽將默認傳遞文件名  後臺獲得的proName的值將為aa

後臺可用 final String proName = (String) list.get(0).getName();進行接收  
當要註意 該方法只有觸發了uploader插件才執行  所以對於只進行名稱修改 而不做圖片修改來說並不適用  本次是把文件名稱抽出來單獨進行保存 與文件保存分開。

function initSuccess(res) {// 初始化用// 初始化wingsUploader //picker 用於圖片上傳
    var uploader = $(‘#picker‘)
            .wingsUploader(
                    {
                        server : "/ajax.sword?ctrl=GxytGnzjImageCtrl_saveImageData&proName="
                                + $("#proName").val(),
                        auto : false,
                        pick : {
                            id : "$(‘#picker‘)",
                            multiple : false
                        },
                        fileSingleSizeLimit : 8 * 1024 * 1024,// 設定單個文件大小
                        // fileNumLimit:1,

                        // 只允許選擇圖片文件
                        accept : {
                            title : ‘Images‘,
                            extensions : ‘gif,jpg,jpeg,bmp,png,svg‘,
                            mimeTypes : ‘image/gif,image/jpeg,image/jpg,image/png,image/svg,image/bmp‘
                        },
                        thumb : {
                            // width: 110,
                            // height: 110,

                            // 圖片質量，只有type為`image/jpeg`的時候才有效。
                            quality : 70,

                            // 是否允許放大，如果想要生成小圖的時候不失真，此選項應該設置為false.
                            allowMagnify : true,

                            // 是否允許裁剪。
                            crop : false

                        // 為空的話則保留原有圖片格式。
                        // 否則強制轉換成指定的類型。
                        // type: ‘image/jpeg‘
                        },

                        successfun : function() {

                        },
                        errorFun : function() {
                        }
                    });
    uploader.pictureShow("#preview");
    var $btn = $(‘#ctlBtn‘);
    var $delbtn = $(‘#delBtn‘);
    $btn.click(function() { $btn 保存按鈕

        uploader.fileStart();//上傳文件
        saveProName();//點擊保存時 調用的其它方法
        savaXuan();//點擊保存時 調用的其它方法
    });
}

jsp

<div id="list" class="uploader-list"></div>
            <div class="btns">
                <div style="margin-top: -10px;">
                    <div class="weui_uploader_input_wrp">
                        <div class="weui_uploader_input"   id="picker"></div> //插件將自動生成input 

                    </div>
                </div>
                <div class="form-group" style="overflow: hidden;">
                    <div id="uploader" class="wu-example" style="">

                        <form id="uploadForm" action="upload.php" method="post"
                            enctype="multipart/form-data">
                            <div class="upload_box">
                                <div class="upload_main" style="background:#fff;">
                                    <div id="preview" class="upload_drag_area" style=""></div>//用於圖片預覽
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

java Ctrl：

@SuppressWarnings("unchecked")
    public IResData saveImageData(IReqData req) throws SwordBaseCheckedException, FileUploadException, IOException {
        final IResData res = new SwordRes();
        final List<FileItem> list = req.getUploadList();//得到文件這裏默認使用list<FileItem> 來接收//final String proName = (String) list.get(0).getName();
        final FileItem filetem = list.get(0);//創建文件filetem對象 用於後續獲取文件大小 類型等
        final InputStream stream = filetem.getInputStream();// 以流的形式返回上傳文件的主體內容 建立一個連接到所傳圖片的位置的流 並將數據源中的數據轉換為流對象 
        // 獲取文件相關的信息
        final byte[] bytes = IOUtils.toByteArray(stream);// 進文件inputStream流轉化為byte[]數組 用於讀取寫文件
        final Long fileSize = filetem.getSize();// 文件大小
        final String fileLx = filetem.getContentType();// 文件類型
        //final String fileName = filetem.getName();// 文件名稱
        final HttpServletRequest request = ContextAPI.getReq();//HttpServletRequest對象代表客戶端的請求，當客戶端通過HTTP協議訪問服務器時，
                                                              //HTTP請求頭中的所有信息都封裝在這個對象中，通過這個對象提供的方法，可以獲得客戶端請求的所有信息
        final String path = request.getSession().getServletContext().getRealPath("/gxyt/logo");//獲得服務器相對於/gxyt/logo的地址
        final File filepackpath = new File(path);  //以該地址創建一個文件
        if (filepackpath.exists()) {// 如果該文件夾存在 刪除文件夾裏所有的文件 
            deleteAll(filepackpath);
            //filepackpath.delete();
         
        } else { //如果文件夾不存在 創建文件夾
            filepackpath.mkdirs();// 新建
        }
        final Map<String, Object> fileMap = new HashMap<String, Object>();
        fileMap.put("filePath", File.separator + "gxyt" + File.separator + "logo" + File.separator);
        fileMap.put("fileSize", fileSize);
        fileMap.put("fileLx", fileLx);
        //fileMap.put("proName", proName);
        /* final Map<String, Object> filemap = (Map<String, Object>) SwordServiceUtils.callService("SWZJ.DSJYPT.GXYT010.SAVEIMAGEDATA", fileMap);
        final String tempFilePath = (String) filemap.get("filePath");//得到文件位置(Map<String, Object>) 

        if (filemap.get("flag").equals(1)) {//文件路徑保存成功 flag=1 圖片寫入服務器
            final File filepath = new File(tempFilePath);
            final OutputStream bos = new FileOutputStream(filepath);
            
            while ((bytesRead = stream.read(file, 0, file.length)) != -1) {
                bos.write(file, 0, bytesRead);// 將文件寫入服務器
            }
            bos.close();
            stream.close();
        }*/
        int bytesRead = 0; //stream,read();方法每次返回的都是int類型
        while ((bytesRead = stream.read(bytes, 0, bytes.length)) != -1) {//讀文件個數
            final Map<String, Object> filemap = (Map<String, Object>) SwordServiceUtils.callService("SWZJ.DSJYPT.GXYT010.SAVEIMAGEDATA", fileMap);//請求一次路徑
            //final String tempFilePath = (String) filemap.get("filePath");//得到文件位置(Map<String, Object>) 
            final String tempFilePath = filepackpath + File.separator + "logo." + fileLx.substring(fileLx.lastIndexOf("/") + 1);//得到文件路徑（帶有文件的）
            if (filemap.get("flag").equals(1)) {//文件路徑保存成功 flag=1 圖片寫入服務器
                final File filepath = new File(tempFilePath);//以這個路徑創建文件
                final OutputStream bos = new FileOutputStream(filepath);//創建這個路徑下的輸出流 
                bos.write(bytes, 0, bytesRead);// 進bytes數組從第一個0 到字節存在的位置 寫到bos輸出流裏
                bos.close();//關閉輸出流
                //圖片進行壓縮 采用下面方法 由於本圖片文件為logo 所以不進行圖片壓縮
                //ImageZipUtil.zipWidthHeightImageFile(new File(tempFilePath), new File(tempFilePath), 28, 28, 1.0f);//文件寫入服務器之後把圖片壓縮為28*28 再上傳
            }
        }
        stream.close();
        return res;
    }
//刪除文件夾裏所有的文件

public static void deleteAll(File file) {

if (file.isFile() || file.list().length == 0) {
file.delete();
} else {
final File[] files = file.listFiles();
for (int i = 0; i < files.length; i++) {
deleteAll(files[i]);
files[i].delete();
}
}
}

關於文件上傳-圖片上傳