首页 > 代码库 > 关于文件上传-图片上传

关于文件上传-图片上传

2024-10-22 07:05:39   213人阅读

本次开发采用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="http://www.mamicode.com/‘ + 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();
            }
        }
    } 


 




 


 
关于文件上传-图片上传






























        

            
                
                  
                
                

                    联系

                    我们