html怎样实现图片的上传,图片上传之前端实现

预备知识

文件上传使用的是POST接口，发送的Content-Type 为multipart/form-data

上传

前端上传的html实现

上传js实现

js上传主要使用XMLHttpRequest和FormData对象以及表示上传进度的ProgressEvent对象。

var form = document.getElementById('fileUpload');

form.onsubmit = function(event){

event.preventDefault();

var uploadInput = document.getElementById("uploadInput");

//files js FileList对象

var file = uploadInput.files[0]

/**

* file js File对象，包含以下信息

* lastModified:1480827962683

* lastModifiedDate:Sun Dec 04 2016 13:06:02 GMT+0800 (中国标准时间)

* name:"IMG_2265.PNG"

* size:74278

* type:"image/png"

* webkitRelativePath:""

*/

console.log(file);

var data = {name:uploadInput.name,file:file};

uploadFile(event.srcElement.action,data,complete,error,progress,start,end);

}

function complete(progressEvent) {

console.log('complete : ', progressEvent);

}

function error(progressEvent) {

console.log('error : ' , progressEvent);

}

function progress(progressEvent) {

console.log('progress : ' , progressEvent);

}

function start(progressEvent) {

console.log('start : ', progressEvent);

}

function end(progressEvent) {

console.log('end : ' , progressEvent);

}

/**

*

* @param url POST url地址

* @param file 上传的文件对象

* @param complete 上传完成回调

* @param error 上传错误回调

* @param progress 上传进度回调

* @param start 开始上传回调

* @param end 上传结束

*/

function uploadFile(url,data,complete,error,progress,start,end) {

var request = new XMLHttpRequest();

var formData = new FormData();

formData.append(data.name,data.file);

//true 表示异步请求

request.open("post",url,true);

request.onload = complete;

request.onerror = error;

request.upload.onprogress = progress;

request.upload.onloadstart = start;

request.upload.onloadend = end;

request.send(formData);

}