onclick触发type=file并上传文件

最近又研究了点前端的东西（小编也是见了鬼，身为后端程序员净干前端活儿了），通过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，后台上传图片代码就不贴了，网上有很多现成的~