zoukankan      html  css  js  c++  java
  • 利用H5 FormData 实现表单中多图上传(可带其他如String类型数据)

    本篇的具体思路来源于右侧网址:http://blog.csdn.net/qq_19551571/article/details/49977983

    本篇代码有所修改,请具体区分。

    本篇使用的是 form 提交,ajax 发送请求(但个人感觉把容器换成 div 之类的也是一样的思路,待验证),提交数据类型 FormData 对象。

    H5中 form 表单的代码:

    <form class="inpform" id="uploadForm" enctype="multipart/form-data">
    <!-- 注意enctype必须得填 -->
        <div class="f-inp">
            <div><i>请输入您的号码:</i>
                <input type="text"  name="phone" id="phone"  >
            </div>
           
            <input type="file" id="files" name="files" multiple/> <!-- multiple 确保能选择多文件 -->
        </div>
    </form>
    
    <input  type="button" value="提交" onclick="add();">      

    js、ajax代码:

    function add(){
         var formData = new FormData($("#uploadForm")[0]);//用form 表单直接 构造formData 对象; 就不需要下面的append 方法来为表单进行赋值了。 
         $.ajax({
             async: false,        //要求同步 不是不需看你的需求
             url : "/uploadImage/save",  
             type : 'POST',  
             data : formData,  
             processData : false,  //必须false才会避开jQuery对 formdata 的默认处理   
             contentType : false,  //必须false才会自动加上正确的Content-Type
             success : function(result) {  
                   ...
             },  
             error : function(result) {  
                   ...
             }  
         });  
    }    

    java Spring 中的代码:

    处理器
    @Controller
    @RequestMapping("/uploadImage")
    public class UploadController{
    @RequestMapping("/savecc")
      //注意传入的参数
    public void saveImageCC (@RequestParam(value = "files", required = true)MultipartFile[] multipartFiles ,String phone, HttpServletRequest request)throws Exception{
        ...
    //调用文件上传处理类 Map<String, Object> result = UploadFilesUtils_cc.uploadCC(multipartFiles, request, 1, "", phone, 1000, 1000, true);   ...
      }
    } utils类:
    public class UploadFilesUtils_cc { public static Map<String,Object> uploadCC(MultipartFile[] multipartFiles,HttpServletRequest request, int type,String module,String folder,int width, int height ,Boolean createFolder) throws UnsupportedEncodingException ,IOException , URISyntaxException{ request.setCharacterEncoding("utf-8"); //结果集 Map<String, Object> result = new HashMap<>(); //图片集 Map<String, String> data = new HashMap<>(); String uploadPath = "E:/reporitory/static/uploadImg/"+folder; File file = new File(uploadPath); if(!file.exists()){ file.mkdirs(); } try{ Boolean success = true ; String message = "文件上传失败"; String fieldNames = ""; String urls = ""; String uuid ; for(MultipartFile multipartFile:multipartFiles){ if(multipartFile != null){ //如果fileitem中封装的上传文件,得到上传的文件名称 //filename格式"c:/static/mod/xxx.png" String filename = multipartFile.getOriginalFilename(); fieldNames += "|" + multipartFile.getName(); if(StringUtils.isNotBlank(filename)){ // 注意:不同的浏览器提交的文件名是不一样的,有些浏览器提交上来的文件名是带有路径的,如: // c:a1.txt,而有些只是单纯的文件名,如:1.txt // 处理获取到的上传文件的文件名的路径部分,只保留文件名部分 filename = filename.substring(filename.lastIndexOf("/") + 1); // 得到上传文件的扩展名 String fileExtName = filename.substring(filename.lastIndexOf(".")+1); // 如果需要限制上传的文件类型,那么可以通过文件的扩展名来判断上传的文件类型是否合法 // 此处是图片格式校验 if((type == Constant.FileType.image.key) && !UploadFilesUtils_cc.checkIMGType(fileExtName)) { message = "图片格式不正确,请重新上传"; success = false; result.put("success", success); result.put("message", message); return result; //break; } else { //使用UUID解决文件重名问题 uuid = UUID.randomUUID().toString(); //数据库里面需要保存的图片上传的路径 String url = uuid + "." + fileExtName; //获取item中的上传文件输入流 InputStream in = multipartFile.getInputStream(); //创建文件输出流 FileOutputStream out = new FileOutputStream(uploadPath + "\" + url); //创建缓冲区 byte[] buffer = new byte[1024]; //判断输入流中的数据是否已经读完的标识 int len = 0; //循环将输入流读入缓冲区,(len=in.read(buffer))>0就表示in里面还有数据 while((len = in.read(buffer)) > 0){ //使用FileOutputStream输出流将缓冲区的数据写入到指定的目录(savePath + "\" + url)当中 out.write(buffer , 0 , len); } //关闭输入流 in.close(); //关闭输出流 out.close(); if(StringUtils.isBlank(urls)){ urls = url; } else { urls += "|" + url; } } } //data.put("linked", "..."+folder+"/"+ urls); //data.put("filename", filename); } } fieldNames = fieldNames.substring(1); data.put("phone", folder); data.put("fieldNames", fieldNames); data.put("linked","..."+folder+"/"+ urls); result.put("success", true); result.put("message", "图片上传成功!"); result.put("data",data); return result; }catch(Exception e){ System.out.println("上传文件出现错误:" + e.getMessage()); return null; } } }
  • 相关阅读:
    Hadoop使用实例
    hdfs操作命令
    Hadoop安装与HDFS体系结构
    Linux和MySQL的安装与基本操作
    Hadoop演进与Hadoop生态
    作业一
    Shader笔记——9.简单灰色效果+遮罩
    iOS——xcodeproj脚本
    iOS——KSAdSDK
    UnityPlugins——4.SignInWithApple
  • 原文地址:https://www.cnblogs.com/cc-freiheit/p/7783617.html
Copyright © 2011-2022 走看看