關於前端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;
}