zoukankan      html  css  js  c++  java
  • Ajax(FormData)实现文件上传

    FormData是什么呢?

    XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.
    所有主流浏览器的较新版本都已经支持这个对象了,比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。

    模板中的代码

    <h3>Ajax上传文件</h3>
     
    <p><input type="text" name="username" id="username" placeholder="username"></p>
    <p><input type="file" name="upload_file_ajax" id="upload_file_ajax"></p>
     
    <button id="upload_button">提交</button>
    {#注意button标签不要用在form表单中使用#}
     
    <script>
        $("#upload_button").click(function(){
     
            var username=$("#username").val();
            var upload_file=$("#upload_file_ajax")[0].files[0];
     
            var formData=new FormData();
            formData.append("username",username);
            formData.append("upload_file_ajax",upload_file);
     
            $.ajax({
                url:"/upload_file/",
                type:"POST",
                data:formData,
                contentType:false,
                processData:false,
     
                success:function(){
                    alert("上传成功!")
                }
            });
     
        })
    </script>
     
  • 相关阅读:
    华大MCU烧录流程
    使用 iperf 测试网络
    Linux的Flash测试【转】
    linux 系统 UDP 丢包问题分析思路 [转]
    [规划算法]Hybrid A *算法原理
    macos 硬盘无法正常识别
    oracle定时任务
    Redis 键(key)
    redis-benchmark性能测试
    redis安装
  • 原文地址:https://www.cnblogs.com/shenZS/p/13462779.html
Copyright © 2011-2022 走看看