最近又研究了点前端的东西（小编也是见了鬼，身为后端程序员净干前端活儿了），通过onclick函数触发input的type="file"并实现上传文件，目的是为了美化input的上传文件功能，而且我发现了个事儿，网上的代码有用的很多，实用的没几个，基本贴出来的代码不是不全就是运行报错，这对于新手来说属实很闹心······下面贴代码~
<button id="uploadBtn">走你</button>
<form id="myForm" style="display: none;">
<input type="file" name="file" id="file" multiple="multiple" onchange="handlefiles(this.files)">
</form>
<script type="text/javascript">
var uploadBtn = document.getElementById("uploadBtn"),
file = document.getElementById("file");
uploadBtn.addEventListener("click", function (e) {
if (file) {
file.click();
}
e.preventDefault();
}, false);
function handlefiles(){
var formData = new FormData($("#myForm")[0]);
$.ajax({
url: "/haha/upload",
type: "post",
data: formData,
contentType:"application/x-www-form-urlencoded; charset=utf-8",
async: false,
cache: false,
contentType: false,
processData: false,
success: function(data){
if(data.state == "1"){
console.log(data.msg)
var html = "<img onclick='big(id)' id=img"+data.id+" src='"+data.fileAddress+"' width='200' height='200'>";
$("#text").val(html);
$("#submit").trigger("click");
}else if(data.state == "2"){
console.log(data.msg)
}else if(data.state == "3"){
console.log(data.msg)
}
}
});
}
<script>
实际上也是有一个input，type="file"不显示，通过button触发input，后台上传图片代码就不贴了，网上有很多现成的~
