javascript异步上传图片文件

Posted 小太阳Sunny

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript异步上传图片文件相关的知识,希望对你有一定的参考价值。

html
<form action="url" enctype="multipart/form-data" id="myform" method="post">
        <input accept="image/*" id="addfile" type="file" />
</form>
 
 
jquery:
$("#addfile").on(‘change‘, function () {
    var f = $(this).get(0).files[0];
    var form = document.getElementById(‘myform‘);
    var formData = new FormData(form);
    formData.append(‘Filedata‘, f);
    var xhr = new XMLHttpRequest();
    xhr.addEventListener("load", uploadComplete, false);
    xhr.addEventListener("error", uploadFailed, false);
    xhr.open(‘POST‘, form.action);
    xhr.send(formData);
});
function uploadComplete(evt)
{
    var data=evt.target.responseText
}
function uploadFailed()
{
    alert("上传失败!请重试!"); 
}

以上是关于javascript异步上传图片文件的主要内容,如果未能解决你的问题,请参考以下文章

mvc视图中怎么上传图片并显示

求一段JS或Jquery异步上传图片的代码

使用Jersey上传文件

异步上传文件图片

摒弃FORM表单上传图片,异步批量上传照片

formiframe实现异步上传文件