input file 选择文件后自动上传文件

最新推荐文章于 2024-06-18 09:55:59 发布

北街学长

最新推荐文章于 2024-06-18 09:55:59 发布

阅读量3.2w

点赞数 1

分类专栏：学习文章标签：文件上传

本文链接：https://blog.csdn.net/qq_36790381/article/details/81138590

版权

学习专栏收录该内容

12 篇文章 0 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <title>测试文件上传</title>
      <script type="text/javascript" src="js/jquery%20v3.3.1.js"></script>
      <script type="text/javascript">
            //③创建fileLoad方法用来上传文件
            function fileLoad(ele){
                  //④创建一个formData对象
                var formData = new formData();
                //⑤获取传入元素的val
                var name = $(ele).val();
                  //⑥获取files
                var files = $(ele)[0].files[0];
                //⑦将name 和 files 添加到formData中，键值对形式
                formData.append("file", files);
                formData.append("name", name);
                $.ajax({
                    url: "test.php",
                    type: 'POST',
                    data: formData,
                    processData: false,// ⑧告诉jQuery不要去处理发送的数据
                    contentType: false, // ⑨告诉jQuery不要去设置Content-Type请求头
                    beforeSend: function () {
                       //⑩发送之前的动作
                        alert("我还没开始发送呢");
                    },
                    success: function (responseStr) {
                       //11成功后的动作
                        alert("成功啦");
                    }
                    ,
                    error : function (responseStr) {
                        //12出错后的动作
                        alert("出错啦");
                    }
                });
            }
            $(function () {
                var $input =  $("#upLoad");
                // ①为input设定change事件
                $input.change(function () {
                //    ②如果value不为空，调用文件加载方法
                    if($(this).val() != ""){
                        fileLoad(this);
                    }
                })
            })
      </script>
</head>
<body>
      <form action="">
            <input type="file" id="upLoad">
      </form>
</body>

</html>

北街学长

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
7
评论
input file 选择文件后自动上传文件

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;测试文件上传&lt;/title&gt; &lt;script type="text/javascript&quo
复制链接

扫一扫