http可以发送html 不能发送文件,HTML5 借助http请求发送formdata对象,从而上传文件 XMLHttpRequest, FormData...

JS文件上传

* {

margin: 0;

padding: 0;

}

#img {

display: block;

width: 9.98rem;

height: 6rem;

border: .01rem solid black;

}

#file {

display: block;

margin: -6rem 0 0 0;

opacity: 0;

width: 10rem;

height: 6rem;

}

#submit {

display: block;

width: 5rem;

height: 2rem;

margin: .5rem 2.5rem;

font-size: .45rem;

text-align: center;

line-height: 2rem;

}

// rem布局

$('html').css('font-size', $(window).width() / 10);

// 实例化formData对象

var formData = new FormData();

// 当选取文件时

$('#file').on("change", function() {

var fileList = $("#file")[0].files;

var src = URL.createObjectURL(fileList[0]);

$('#img').attr('src', src);

formData.append("file", fileList[0]);

});

// 点击提交上传时

$("#submit").on('click', function(){

/**

* http 请求对象 XMLHttpRequest

* XMLHttpRequest.open(请求方式, 请求地址, 是否异步 )

* XMLHttpRequest.onload: 请求响应时调用的方法

* e.target.responseText: 服务器响应的文本内容

*/

var httpRequest = new XMLHttpRequest();

httpRequest.open("POST", "http://192.168.0.105/WebTest/FileUploadServlet", true);

httpRequest.onload = function(e){

console.log(e.target.responseText);

}

httpRequest.send(formData);

});

JQ中的FormData对象 ajax上传文件

HTML代码:

http 协议上传文件multipart form-data boundary 说明--转载