图片上传(方法一:jquery.upload.js)

 

一、在JSP页面引入jquery.upload.js 文件:

<script type="text/javascript" src="${ctx}/script/jquery.upload.js"></script>

 

二、JSP页面代码:

<!-- 弹窗  开始  -->
        <div class="dialog_teachermanage" id="addDialog" style="width:923px; display:none" >
              <div class="dialog_title" data-operateType="add"></div>
              <form id="formId" method="post" enctype="multipart/form-data">
                  <div class="dialog_body">                  
                      <div class="left">
                          
                          <!-- 上传头像  ajax提交  class="hide"  -->
                          <div class="head_photo">
                              <input type="button" id="head_pic_btn" value="点击上传头像" />
                              <img src="${ctx}/static/images/common/head_default.jpg" data-img="head_default.jpg" width="180px" height="210px" id="head_img" />
                          </div>
                          
                          <!-- 上传头像  form提交  -->
                          <!-- 
                          <div class="tphoto" name="head_img" id="head_img">
                            <input type="file" name="file" id="file" onchange="previewImage(this)" />
                            <div id="preview">
                                <img id="imghead" border="1" width="100px;" heigh="100px;" src=‘${ctx}/static/images/common/head_default.jpg‘>
                            </div>
                          </div>
                           -->
                          
                          <div class="clear" style="height:30px;"></div>
                          <!-- 隐藏的标签查询、输入框 -->
                          <div class="addsign" id="addCourse">
                              <div class="tagdiv">
                                <a class="addtag"><i class=‘iconfont‘>&#xe623;</i>添加标签</a>
                                <div class="taginput clearfix">
                                    <input class="form-control" id="tagName" type="text" />
                                    <i class="iconfont ok" id="addtag-ok">&#xe626;</i>
                                    <i class="iconfont cancel" id="addtag-cancel">&#xe627;</i>
                                </div>
                            </div>
                          </div>
                          <ul class="singul labels" name="labels" id="labels"></ul>
                      </div>
                      
                      <div class="right">
                          <input type="hidden" id="id">
                          <div class="right_tinput">
                              <span class="t_span">姓名</span>
                              <input type="text" name="name" id="name" data-rule="required;length[1~30]" data-tip="30字以内"/>
                          </div>
                          <div class="right_tinput">
                              <span class="t_span">头衔</span>
                              <input type="text" name="title" id="title" data-rule="length[0~30]" data-tip="30字以内"/>
                          </div>
                          <div class="right_tinput">
                              <span class="t_span">电话</span>
                              <input type="text" name="phone" id="phone"  data-rule="mobile"  data-rule-mobile="[/^1[3458]\d{9}$/, ‘请检查手机号格式‘]" />
                          </div>
                          <div class="right_tinput">
                              <span class="t_span">邮箱地址</span>
                              <input type="text" name="email" id="email" data-rule="email;length[0~50];"/>
                          </div>
                          <div class="right_tinput">
                              <span class="t_span">讲师类型</span>
                              <select id="trainerTypeId_add"  name="trainerTypeId" placeholder="请选择"/></select>
                          </div>
                          <div class="right_tinput">
                              <span class="t_span">专业领域</span>
                              <textarea  cols="46" rows="5" placeholder="限200字" name="proField" id="proField" data-rule="length[0~200]"></textarea>
                          </div>
                          <div class="right_tinput">
                              <span class="t_span">简介</span>
                              <textarea cols="46" rows="5" placeholder="限200字" name="intro" id="intro" data-rule="length[0~200]"></textarea>
                          </div>
                      </div>
                  </div>
                  
                  <div class="dialog_bottom">
                      <div class="buttons">
                          <button type="button" id="cancel">取消</button>
                          <button type="submit" >保存</button>
                        </div>
                  </div>
              </form>
          </div>
          <!-- 弹窗  结束  -->


三:JS代码:

<script type="text/javascript" >
    $(function(){
            
        //点击上传头像
        $("#head_pic_btn").click(function(){
            $.upload({
                url:‘${ctx}/td/trainer/uploadHeadImg.do‘,
                fileName:‘img‘,
                dataType:‘json‘,
                onComplate:function(data){
                    
                    //删除data中<pre>标签
                    var start = data.indexOf(">");
                    if (start != -1) {
                        var end = data.indexOf("<", start + 1);
                        if (end != -1) {
                            data = data.substring(start + 1, end);
                        }
                    }
                    
                    if(data!==‘‘){
                        //$("#head_pic_btn").hide();
                        //$("#head_img").show().attr(‘src‘,"${ctx}/upload/trainer_picture/"+data);
                        
                        $("#head_img").attr("src","${ctx}/upload/trainer_picture/"+data);
                        $("#head_img").attr("data-img",data);
                        
                        /**
                        data=JSON.parse( data.match(/{.+}/)[0] )
                        if( data.result===‘true‘ ){
                            $(‘#head_pic_btn‘).hide();
                            $(‘#head_img‘).show().attr(‘src‘,"${ctx}/upload/trainer_picture/"+data);
                        };
                        alert(data.resultDesc);
                        */
                    };
                }
            });
        });
 });

 

四、JS提交代码(带预览效果):

//新增修改 验证提交
          $("#formId").validator({
              theme :"simple_bottom",
                valid: function(form){
                    var tname=$(".dialog_title").text();
                     if(tname.indexOf("修改")>=0){
                         //修改保存
                         //SaveEditTeacher();
                         var labels = "";
                      var index = 0;
                      $(".labels").find("li").each(function(){
                          if(index==0){
                              labels += "‘" + $(this).attr("data-id") + "‘";
                          }else{
                              labels += ",‘"+$(this).attr("data-id") + "‘";
                          }
                          index++;
                      });
                      
                      var param={headImg:$("#head_img").attr("data-img"),name:$("#name").val(),title:$("#title").val(),phone:$("#phone").val(),email:$("#email").val(),proField:$("#proField").val(),trainerTypeId:$("#trainerTypeId").val(),address:$("#address").val(),intro:$("#intro").val(),labels:labels };
                      $.ajax({
                            url:"${ctx}/td/trainer/modify.do",
                          type:"get",
                          data:param,
                          success:function(data){
                              if(data.result=="true"){
                                   new AlertWin().initfn({
                                       "tipscon":data.resultDesc,
                                       "showtime":2000
                                   });
                                   $("#formId")[0].reset();
                                   addWin.close();
                               }else{
                                   new AlertWin().initfn({
                                       "tipscon":data.resultDesc,
                                       "showtime":2000
                                   }); 
                               }
                              //table.load();
                              table.load({"pageBean.pageNo": 1,name: $.trim($("#search_name").val()),trainerTypeId:$("#search_trainerTypeId").val() } );
                          }
                      });
                  
                     }else{
                         //新增
                         var labels = "";
                      var index = 0;
                      $(".labels").find("li").each(function(){
                          if(index==0){
                              labels += "‘" + $(this).attr("data-id") + "‘";
                          }else{
                              labels += ",‘"+$(this).attr("data-id") + "‘";
                          }
                          index++;
                      });
                      
                      var param={headImg:$("#head_img").attr("data-img"),name:$("#name").val(),title:$("#title").val(),phone:$("#phone").val(),email:$("#email").val(),proField:$("#proField").val(),trainerTypeId:$("#trainerTypeId").val(),address:$("#address").val(),intro:$("#intro").val(),labels:labels };
                      $.ajax({
                            url:"${ctx}/td/trainer/insert.do",
                          type:"get",
                          data:param,
                          success:function(data){
                              if(data.result=="true"){
                                   new AlertWin().initfn({
                                       "tipscon":data.resultDesc,
                                       "showtime":2000
                                   });
                                   $("#formId")[0].reset();
                                   addWin.close();
                               }else{
                                   new AlertWin().initfn({
                                       "tipscon":data.resultDesc,
                                       "showtime":2000
                                   }); 
                               }
                              //table.load();
                              table.load({"pageBean.pageNo": 1,name: $.trim($("#search_name").val()),trainerTypeId:$("#search_trainerTypeId").val() } );
                          }
                      });
                     }
                 }
          });

 


五、Java后台代码:

/**
     * 
     * @Title: uploadHeadImg 
     * @Description: 上传头像 
     * @param @param file
     * @param @param xCoordinate
     * @param @param yCoordinate
     * @param @param width
     * @param @param imgName
     * @param @param height
     * @param @param request
     * @param @param model
     * @param @return
     * @return String
     * @throws
     */
    @RequestMapping(value = "/uploadHeadImg", produces = "text/plain;charset=UTF-8")
    @ResponseBody
    public String uploadHeadImg(@RequestParam(value = "img", required = false) MultipartFile file,
            @RequestParam(value = "xCoordinate", required = false) Integer xCoordinate,
            @RequestParam(value = "yCoordinate", required = false) Integer yCoordinate,
            @RequestParam(value = "width", required = false) Integer width,
            @RequestParam(value = "imgName", required = false) String imgName,
            @RequestParam(value = "height", required = false) Integer height, HttpServletRequest request, ModelMap model) {
        
        String result = "";
        EmpMessageRes msg = new EmpMessageRes();
        
        //获得工程下面upload资源包路径,当然这个包是已经存在的了
        String path = request.getSession().getServletContext().getRealPath("upload/trainer_picture");
        
        //上传的图片的名称
        String fileName = file.getOriginalFilename();
        String newfileName = UUIDUtil.generateGUID() + fileName.substring(fileName.lastIndexOf(".")).toLowerCase();
        
        //下面是upload路径盘符的转化        
        StringBuffer importPath = new StringBuffer();
        String temp[] = path.split("\\\\");
        
        for (int i = 0; i < temp.length; i++) {
            importPath.append(temp[i]);
            importPath.append("/");
        }
        
        importPath.append(newfileName);
        //看是否存在upload包,没有则会新建一个upload包,作为资源上传的路径
        File targetFile = new File(path, newfileName);
        if (!targetFile.exists()) {
            targetFile.mkdirs();
        }
        
        try { //文件上传
            file.transferTo(targetFile);
            /**
             *利用工具类对图片进行裁剪
             */
            //String name = "D:\\image.jpg";
            if (xCoordinate != null && yCoordinate != null && width != null && height != null) {
                OperateImage o = new OperateImage(xCoordinate, yCoordinate, width, height);
                o.setSrcpath(importPath.toString());
                o.setSubpath(importPath.toString());
                File toCompress = new File(importPath.toString());
                o.cut();
                if (toCompress.length() / 1024 > 50)
                    //将上传的图片进行压缩
                    ImgUtil.createIcon(importPath.toString());
            }
            msg.setResult("true");
            msg.setResultDesc("头像上传成功");
            msg.setImgUrl(newfileName);
            //result = "originalFilename=" + fileName + ";imgUrl=" + msg.getImgUrl() + ";result=" + msg.getResult() + ";resultDesc=" + msg.getResultDesc();
            
            result = msg.getImgUrl();
                    
        } catch (Exception e) {
            msg.setResult("false");
            msg.setResultDesc("头像上传失败");
            e.printStackTrace();
        }
        if (imgName != null) {
            File later = new File(path, imgName);
            if (later != null)
                later.delete();
        }
        
        return result;
    }


效果如图:

 技术分享

jquery.upload.js:

技术分享
var onChooseFile = ‘‘; (function($) {
    var noop = function(){
        return true;
    };
    var frameCount = 0;
    var imgName = ‘‘;
    $.uploadDefault = {
        url: ‘‘,
        fileName: ‘filedata‘,
        dataType: ‘json‘,
        params: {},
        onSend: noop,
        exten: [],
        onComplate: noop
    };

    $.upload = function(options) {
        var opts = $.extend(jQuery.uploadDefault, options);
        if (opts.url == ‘‘) {
            return;
        }

        var canSend = opts.onSend();
        if (!canSend) {
            return;
        }

        var frameName = ‘upload_frame_‘ + (frameCount++);
        var iframe = $(‘<iframe style="position:absolute;height:0;width:0;" name="‘+frameName+‘" />‘);
        var form = $(‘<form method="post" style="display:none;" target="‘+frameName+‘" action="‘+opts.url+‘"  name="form_‘+frameName+‘" enctype="multipart/form-data" />‘);
        // 选中文件, 提交表单(开始上传)
        upFile = function(fileInputDOM) {
            imgName = fileInputDOM.value;
            var extension = imgName.match(/\.[^\.]+$/)[0].toLowerCase(),ontest=false;
            if (options.exten !== undefined) {
                for(var i=0;i<options.exten.length;i++){
                    if( extension===options.exten[i] ){
                        ontest=true;
                    };
                };
                if(!ontest){
                    new Tips({
                        "tipscon": "格式为" + options.exten.join(",") + ",请重新选择!"
                    });
                    opts.ie8&&parElement.append(oldElement)
                    return false;
                };                 
            };
            form.submit(); 
            
        };
        var oldElement,parElement,fileInput;
        if(opts.ie8){
            oldElement = $(‘#‘ + opts.fileElementId),parElement=oldElement.parent();
            $(oldElement).appendTo(form);
        }else{
            // form中增加数据域
            var formHtml = ‘<input type="file" name="‘ + opts.fileName + ‘" onchange="upFile(this)">‘;
            for (key in opts.params) {
                formHtml += ‘<input type="hidden" name="‘ + key + ‘" value="‘ + opts.params[key] + ‘">‘;
            }
            form.append(formHtml);
        }
        
        $(document.body).append(form).append(iframe);
        opts.ie8&&upFile(oldElement[0]);
        // iframe 在提交完成之后
        iframe.load(function() {
            var data = $(this).contents().find(‘body‘).html();
            opts.onComplate(data, imgName); 
            if(!data) return false;
            setTimeout(function() {
                opts.ie8&&parElement.append(oldElement)
                iframe.remove();
                form.remove();
            },300);          
        });

        // 文件框
        if(!opts.ie8){
            fileInput = $(‘input[type=file][name=‘ + opts.fileName + ‘]‘, form);
            fileInput.click();
        }
        
    };
})(jQuery);
View Code

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。