function previewImage(fileList,imgStyle,preview) {
for (var i = 0; i < fileList.length; i++) {
var file = fileList[i];
var imageType = new RegExp("^image\/");
if (!imageType.test(file.type)) continue;
// 填充选择的图片到展示区
var img = document.createElement("img");
// img.setAttribute("style","width:auto;height:100px;margin-right:20px;");
img.setAttribute("style",imgStyle);
img.classList.add("obj");
img.file = file;
preview.appendChild(img);
// 读取File对象中的内容
var reader = new FileReader();
reader.onload = (function (aImg) {
return function (e) {
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file);
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
</head>
<body>
<input type="file" id="fileInput" name="file" multiple="multiple" accept="image/*">
</br>
<div id="preview" style="width: 900px;border: 1px lightslategray solid;"></div>
<script src="js/jquery.js"></script>
<script src="js/imageUtils.js"></script>
<script>
$(function() {
// $("#fi").change(function(e) {
// console.log("jQuery")
// console.log(e)
// });
//
});
var fileList = [];
var fileInput = document.querySelector("#fileInput");
var preview = document.querySelector("#preview");
fileInput.addEventListener("change",function(event) {
// 文件列表对象
var fileList = this.files;
// // 获取第一个文件
// var file0 = fileInput.files[0];
// // 文件名
// var filename = file0.name;
// // 文件大小
// var filesize = file0.size;
// //文件的 MIME 类型，如果分辨不出类型，则为空字符串，该属性只读
// var type = file0.type;
// // 文件的上次修改时间，格式为时间戳
// var lastModified = file0.lastModified;
// // 文件的上次修改时间，格式为 Date 对象实例
// var lastModifiedDate = file0.lastModifiedDate;
previewImage(fileList,"width:auto;height:100px;margin-right:20px;",preview);
},false);
</script>
</body>
</html>
单文件
fileInput.addEventListener("change",function(event) {
fileList = this.files;
previewImage(fileList,"width:auto;height:100px;margin-right:20px;",preview);
var formData = new FormData();
formData.append("file",fileList[0]);
$.ajax ({
type : "post",
url : "http://127.0.0.1:8080/upload",
data : formData,
async : true,
cache : false,
contentType: false,
processData : false,
dataType : 'json',
success : function (data) {
console.log(data)
}
});
},false);
多文件
var fileList = [];
var fileInput = document.querySelector("#fileInput");
var preview = document.querySelector("#preview");
fileInput.addEventListener("change",function(event) {
fileList = this.files;
previewImage(fileList,"width:auto;height:100px;margin-right:20px;",preview);
var formData = new FormData();
var list = $("#fileInput")[0].files;
formData.append("name","file");
for (var i = 0; i < list.length; i++) {
var item = list[i];
formData.append("file",item);
}
// formData.append("file",list);
// console.log($("#fileInput")[0].files);
$.ajax ({
type : "post",
url : "http://127.0.0.1:8080/upload",
data : formData,
async : true,
cache : false,
contentType: false,
processData : false,
dataType : 'json',
success : function (data) {
console.log(data)
}
});
},false);
