Rumah > Artikel > hujung hadapan web > 原生js实现文件异步上传的方法

原生js实现文件异步上传的方法

一个新手asal: 2017-10-26 10:03:081858semak imbas

效果图：

代码：（demo33.jsp）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>demo33.jsp</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>

Atas ialah kandungan terperinci 原生js实现文件异步上传的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Require.js使用方法总结 Artikel seterusnya：JavaScript插件化框架MinimaJS的开源详解

Artikel berkaitan

Lihat lagi