一直以來上傳文件都使用的是別人的組件姜凄，今天看下無刷新上傳內(nèi)部具體的做法。上傳文件可以使用form的形式來上傳坛芽，也可以通過構(gòu)造formData使用ajax來上傳文件留储；
<div >
<input type="file" name="FileUpload" id="FileUpload">
<a class="layui-btn layui-btn-mini" id="btn_uploadimg">上傳圖片</a>
</div>
<script type="text/jascript">
$(function () {
$("#btn_uploadimg").click(function () {
var fileObj = document.getElementById("FileUpload").files[0]; // js 獲取文件對(duì)象
if (typeof (fileObj) == "undefined" || fileObj.size <= 0) {
alert("請(qǐng)選擇圖片");
return;
}
var formFile = new FormData();
formFile.append("action", "UploadVMKImagePath");
formFile.append("file", fileObj); //加入文件對(duì)象 file為傳遞給后臺(tái)的參數(shù)翼抠，可以模仿form中input的name值。
//第一種 XMLHttpRequest 對(duì)象
//var xhr = new XMLHttpRequest();
//xhr.open("post", "/Admin/Ajax/VMKHandler.ashx", true);
//xhr.onload = function () {
// alert("上傳完成!");
//};
//xhr.send(formFile);
//第二種 ajax 提交
var data = formFile;
$.ajax({
url: "/Admin/Ajax/VMKHandler.ashx",
data: data,
type: "Post",
dataType: "json",
cache: false,//上傳文件無需緩存
processData: false,//用于對(duì)data參數(shù)進(jìn)行序列化處理 這里必須false
contentType: false, //必須
success: function (result) {
alert("上傳完成!");
},
})
})
})
</script>
上面寫到的是通過獲取dom結(jié)構(gòu)的files來獲取文件获讳，如果需要實(shí)時(shí)上傳的可以再input的onchange事件中獲取到files文件
<input type="file" name="FileUpload" id="FileUpload">
<script>
$(function () {
$(input).click(function(e) {
const files = e.target.files[0]
//這里可以獲取到文件阴颖，接下來做法和上面一樣
})
})
</script>
