前些时间项目和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部分:

#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;

}

//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;

}