关于前端html文件上传和后台接收方法

前些时间项目和h5交互时涉及到了文件上传的一个功能，但是h5在写上传的时候总是上传不上，所以花时间专门看了下web端的文件上传记录下。

第一种是前端写的，拿来修改了下,这种方法在上传的时候需要用到jquery.js和ajaxfileupload.js：

//获取图片本地url

function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}

//上传文件

var videoupload;
$("#filevideo").change(function () {
layer.load();
var imgUrl = getObjectURL(this.files[0]);
$("#headvideo").attr("src", imgUrl);
var formData = new FormData($("#uploadFormvideo")[0]);
$.ajax({
url: '向后台发送请求地址',
type: 'post',
data: formData,
dataType: 'json',
async: false,
cache: false,
contentType: false,
processData: false,
success: function (res) {
if (res.errorMessage) {
alert(res.errorMessage);
} else {
$("#headvideo").attr("src", res.url);
videoupload = res.url;
layer.closeAll('loading');
}
}

});
});

第二种是带有进度条的文件上传，只是用到了jquery.js

//html部分:

<tbody>

<style>

#parent{width:550px; height:10px; border:2px solid #09F;}
#son {
width:0;
height:100%;
border-radius:10px;
background-color:#e94829;
text-align:center;
line-height:20px;
font-size:15px;
color:white;
font-weight:bold;

}

</style>

 <tr>
  <td><input type="file" id="pic" name="pic" onchange="uploadFile()"></td>
  <div class="grad" id="son"></div>
</tr>
</tbody>

//js部分

function uploadFile(){
    var pic = $("#pic").get(0).files[0];
    var formData = new FormData();
    formData.append("file" , pic);        
    $.ajax({
        type: "POST",
        url: "http://192.168.0.119/reading/upload_renovate.action",
        data: formData ,
        processData : false, //必须false才会自动加上正确的Content-Type
        dataType: 'json',
        contentType : false ,//必须false才会避开jQuery对 formdata 的默认处理 
        xhr: function(){
            var xhr = $.ajaxSettings.xhr();
            if(onprogress && xhr.upload) {
                xhr.upload.addEventListener("progress" , onprogress, false);
                return xhr;
            }
        },
        success: function(res) {
            console.log(res);
            $("#versionsize").val(res.filesize);
            $("#versionurl").val(res.url);
        }
    });
}    

  /**   *  侦查附件上传情况  ,这个方法大概0.05-0.1秒执行一次   */
function onprogress(evt){
    var loaded = evt.loaded;         //已经上传大小情况
    var tot = evt.total;           //附件总大小
    var per = Math.floor(100*loaded/tot);   //已经上传的百分比
    $("#son").html( per +"%" );
    $("#son").css("width" , per +"%");
}

//后台接收文件上传并保存方法

//SSH框架

private File[] file; //上传的文件
private String[] fileFileName; //文件名称
private String[] fileContentType; //文件类型

//提供get/set方法

public String uploadmore(String filepath) throws Exception{
String url = "";
   if (file != null) {
         java.util.Date Datenow=new java.util.Date();//获取当前日期
         java.text.SimpleDateFormat formatter = new java.text.SimpleDateFormat("yyyyMMdd");  
         String nowdate = formatter.format(Datenow).substring(0,6); //将日期格式化
         String realDirectory = request.getSession().getServletContext().getRealPath(filepath)+"/"+nowdate;
         for (int i = 0; i < file.length; i++) {
         String fileType = fileFileName[i].substring(fileFileName[i].length()-3);
         String filename=System.currentTimeMillis() + (i + ".") + fileType;
         String filedir = realDirectory+"/" + filename; // 以系统时间作为上传文件名称，设置上传文件的完整路径
         if (file[i].length()>1024*1024) {
         ImgUtill.compressImage(file[i].getAbsolutePath(), filedir, 500, 680);//image的工具类，可以对图片进行压缩
}else{
             File f = new File(filedir);
             try {
FileUtils.copyFile(file[i], f);
 } catch (IOException e) {
e.printStackTrace();
 }
}

//因为图片的路径都是保存在一个字段里面，所以在上传的时候用逗号隔开
          if (i==file.length-1) {
         url += Constants.FILE_DIRECTORY + filepath + "/" +nowdate+"/"+filename;
}else{
             url += Constants.FILE_DIRECTORY + filepath + "/" +nowdate+"/"+filename+",";
}
}
   }  
    return url;
}

//SSM框架

@RequestMapping(value="/upload",method=RequestMethod.POST)  
    @ResponseBody  
    public String upload(MultipartFile file,HttpServletRequest request) throws IOException{  
        String path = request.getSession().getServletContext().getRealPath("upload");  
        String fileName = file.getOriginalFilename();//获取到上传文件的名字
        //System.out.println(file.getName()+"2222");获取到file
        //file.getSize();获取到上传文件的大小
        File dir = new File(path,fileName);
        System.out.println(file.getSize());
        if(!dir.exists()){  
            dir.mkdirs();  
        }  
        //MultipartFile自带的解析方法  
        file.transferTo(dir);  
        return "/upload"+"/"+fileName;  
    }