源生JS怎样实现文件异步上传

JavaScript016

源生JS怎样实现文件异步上传,第1张

这次给大家带来源生JS怎样实现文件异步上传,源生JS实现文件异步上传的注意事项有哪些,下面就是实战案例,一起来看一下。

<%@ page contentType="text/htmlcharset=UTF-8" language="java" %><html><head><title></title></head><body><label for="text">名称</label><input type="text" id="text" name="name"/><label for="file">文件</label><input type="file" id="file" name="file"/><button type="button" onclick="ajaxUploadFile()">确定</button></body><script type="text/javascript">function ajaxUploadFile() { var formData = new FormData() var xmlhttp if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest() }else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP") } xmlhttp.open("POST","/data",true) xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest") formData.append("name",document.getElementById("text").value) formData.append("file",document.getElementById("file").files[0]) xmlhttp.send(formData) xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4) {if (xmlhttp.status==200) { console.log("上传成功"+xmlhttp.responseText) }else { console.log("上传失败"+xmlhttp.responseText) } } } }</script></html>

相信看了本文案例你已经掌握了方法

图片和文件等流媒体 上传都是靠from表单的提交。

你可以设置一个隐藏的from表单

里面有个<input id='file' type='file'>

选择玩图片之后赋值给file  

然后用jquery from表单提交即可

<form id="form" runat="server" enctype="multipart/form-data" >

<input id='file' type='file'>

</from>

$.ajax({

    url:'XXXX',//上传后台路径

    data:$('#form').serialize(),

    type:"POST",

    success:function(){

    

    }

})