文件上传--有道笔记整理

转载 2015年11月19日 17:25:19
html代码:
    <div style="width:800px;height:50px;">
            <input id="uploadFile" name="uploadFile" accept=".bmp,.gif,.jpeg,.png,.jpg" multiple="multiple" type="file" onchange="previewImagepr(this)" style="float:left;"/>
            <button id="confirmUpload" style="float:left;">确定上传</button>
           </div>
           <div id="preview">
           </div>
js代码:
var fileList = [];
var previewImagepr;
var isUploadPicture = false;
var isSubmit = false;
function showRemove(div){
  $(div).children('div').css({'height':'30px'});
}

function hideRemove(div){
 $(div).children('div').css({'height':'0px'});
}

function removePicture(span){
 $(span).parent('div').parent('div').remove();
// alert($(span).parent('div').parent('div').find('img').attr('id'));
 var id = $(span).parent('div').parent('div').find('img').attr('id');
 for(var index in fileList){
  if(id == fileList[index].id){
   fileList[index].id = -1;
   break;
  }
 }
}
//图片上传新技术
  var imageflag = 0;
  previewImagepr = function(file){
   isUploadPicture = true;
   var MAXWIDTH  = 100;
   var MAXHEIGHT = 100;
   var div = $('#preview');
   if (file.files){
    $.each(file.files,function(index,item){
     if((item.type == 'image/bmp') || (item.type == 'image/gif') || (item.type == 'image/jpeg') || (item.type == 'image/png')){
      // 目前仅支持这四种格式的图片
      //  alert('正确的图片格式');
// id初始值为0,flag初始值为1(有效);
      imgFile = {id:imageflag,flag:1,file:item};
      fileList[fileList.length] = imgFile; //从0开始
      div.append("<div onMouseOver='showRemove(this)' onMouseOut='hideRemove(this)' style='width:100px;height:100px;margin:3px;border:1px solid #000;float:left;'><div class='file-panel' style='height:0px;'><span class='cancel' onClick='removePicture(this)'>删除</span></div><img name='imghead' ></div>");
      var img = $('img[name=imghead]').last();
      img.attr('id',imageflag);
      imageflag++;
      var reader = new FileReader();
      reader.readAsDataURL(item);
      reader.onload = function(evt){
       img.attr('src',evt.target.result);
      }
      img.on('load',function(){
       var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, this.width, this.height);
       img.attr('width',rect.width);
       img.css({'marginLeft':rect.left,'marginTop':rect.top});
      });
     }
    });
   }else{

   }
  }
// 图片确定上传,图片上传.
  $('#confirmUpload').click(function(){
   if(isUploadPicture){
    isSubmit = true;
    isUploadPicture = false;
       var formdata=new FormData(this);
       for(var fl in fileList){
        // 当id为-1,即已经删除了,当flag为0,即已经上传过了的,
        if((fileList[fl].id == -1) || (fileList[fl].flag == 0))
         continue;
        formdata.append("fileUpload"+fl, fileList[fl].file);
        fileList[fl].flag = 0;
       }
       $.ajax({
           type:'POST',
           url:'${ctx}/uploadpic/productPicUpload.do',
           data:formdata,
           /**
            *必须false才会自动加上正确的Content-Type
            */
           contentType:false,
           /**
            * 必须false才会避开jQuery对 formdata 的默认处理
            * XMLHttpRequest会对 formdata 进行正确的处理
            */
           processData:false,
           success: function(dataa){
//         isUploadPicture = true;
                  var data = eval('('+ dataa +')');
                  alert('图片上传成功!');
                  $('#pictures').val($('#pictures').val() + data.resultDesc);
                 },
           error:function(){
//         isUploadPicture = true;
            for(var index in fileList){
             fileList[index].flag = 1;
            }
            alert('上传失败!');
           }
       });
//    isUploadPicture = true;
       return false;
   
   }else{
    alert('请先选择图片!');
   }
   
  });
//调整图片大小
  function clacImgZoomParam( maxWidth, maxHeight, width, height ){
   param = {width:0,height:0,left:0,top:0};
   if( width>maxWidth || height>maxHeight ){
    rateWidth = width / maxWidth;
    rateHeight = height / maxHeight;
    if( rateWidth > rateHeight ){
     param.width =  maxWidth;
     param.height = Math.round(height / rateWidth);
    }else{
     param.width = Math.round(width / rateHeight);
     param.height = maxHeight;
    }
   }
   //居中显示
   param.left = Math.round((maxWidth - param.width) / 2);
   param.top = Math.round((maxHeight - param.height) / 2);
   return param;
  }

后台java代码:
@RequestMapping(value="/uploadpic/productPicUpload.do", produces = { "text/plain;charset=UTF-8" })
 @ResponseBody
 public String productPicUpload(HttpServletRequest request,HttpServletResponse response) throws IllegalStateException, IOException {
  String realPath = request.getSession().getServletContext().getRealPath("/");
  //创建一个通用的多部分解析器
  CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
  //判断 request 是否有文件上传,即多部分请求
  if(multipartResolver.isMultipart(request)){
   //转换成多部分request  
   MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest)request;
   //取得request中的所有文件名
   Iterator<String> iter = multiRequest.getFileNames();
   List<MultipartFile> fls = multiRequest.getFiles("uploadFile");
   String filePath = "upload" + File.separator + "image" + File.separator;
   String lastName = "";
   StringBuilder sBuilder = new StringBuilder("");
// StringBuilder sBuilder = new StringBuilder("{'fileUrl':'");
   while(iter.hasNext()){
    //记录上传过程起始时的时间,用来计算上传时间
    int pre = (int) System.currentTimeMillis();
    //取得上传文件
    String name = iter.next();
    List<MultipartFile> multipartFiles = multiRequest.getFiles(name);
    for (MultipartFile file : multipartFiles) {
     if(file != null){
      //取得当前上传文件的文件名称
      String myFileName = file.getOriginalFilename();
      //如果名称不为“”,说明该文件存在,否则说明该文件不存在
      if(myFileName.trim() !=""){
       System.out.println(myFileName);
       //重命名上传后的文件名
       String originalFileName = file.getOriginalFilename();
       String postFix = originalFileName.substring(originalFileName.lastIndexOf("."));
       String fileName = IDGenerator.generateID() + postFix;
       //定义上传路径
       String remotePaht = realPath + filePath + fileName;
       lastName = filePath + fileName;
       logger.info(remotePaht);
       sBuilder.append("../").append(lastName).append(";");
       File localFile = new File(remotePaht);
       file.transferTo(localFile);
      }
     }
    }
    //记录上传该文件后的时间
    int finaltime = (int) System.currentTimeMillis();
    System.out.println(finaltime - pre);
   }
// sBuilder.append("'}");
   
   
   System.out.println(sBuilder.toString().replaceAll("\\\\", "/"));
   Map<String, Object> resultMap = new HashMap<String, Object>();
   resultMap.put("result", "success");
   resultMap.put("resultDesc", sBuilder.toString().replaceAll("\\\\", "/"));
   return SpringAction.buildActionResult(resultMap);
   
// return sBuilder.toString().replaceAll("\\\\", "/");
  }
  return SpringAction.buildActionResult("error", "文件不能为空");
 }

相关文章推荐

struts2笔记之文件上传

  • 2012-10-02 11:08
  • 18KB
  • 下载

Servlet 3.0笔记之超方便的文件上传支持

在以前,处理文件上传是一个很痛苦的事情,大都借助于开源的上传组件,诸如commons fileupload等。现在好了,很方便,便捷到比那些组件都方便至极。以前的HTML端上传表单不用改变什么,还是一...

Struts2学习笔记(15)-----Struts2文件上传之牛刀小试(上)

文件上传是网络生活中比较常用的一个功能,比如将照片上传到QQ空间,将文件上传到网盘等,我就喜欢将一些珍贵的东西上传到115网盘去,自己永久保存着多好。实现文件上传的技术有很多,今天就来探讨一下用Str...

struts2文件上传笔记

一、步骤: 1、 在 Jsp 页面的文件上传表单里使用 file 标签. 如果需要一次上传多个文件, 就必须使用多个 file 标签, 但它们的名字必须是相同的 2、在 Action 中新添加 ...

[Struts2]struts2 实现文件上传【学习笔记】

文件上传-->upload.jsp :

Servlet 3.0笔记之超方便的文件上传支持

Servlet 3.0笔记之超方便的文件上传支持 在以前,处理文件上传是一个很痛苦的事情,大都借助于开源的上传组件,诸如commons fileupload等。现在好了,很方便,便捷到比那些组件...

SpringMVC学习笔记--文件上传与MultipartResolver

要在基于SpringMVC的Web应用程序中通过表单上传文件,那么MultipartResolver将是在服务器端处理文件上传的主要组件  multipart/form-data编码方式支持基于...
  • cwzhsi
  • cwzhsi
  • 2014-12-13 09:44
  • 2621

struts2 文件上传笔记

struts2官方的文件上传教程 http://struts.apache.org/2.2.1.1/docs/file-upload.htmlhttp://struts.apache.org/2.2....
  • kvgnt
  • kvgnt
  • 2011-02-28 17:01
  • 564

Struts2笔记——文件上传

文件上传概述 * 要想使用HTML 表单上传一个或多个文件, 必须把 HTML 表单的 enctype 属性设置为multipart/form-data,把它的 method 属性设置为post...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)