关于使用jQuery前端上传文件

最新推荐文章于 2024-08-21 08:34:53 发布

AdleyTales

最新推荐文章于 2024-08-21 08:34:53 发布

阅读量2.4w

点赞数

分类专栏： HTML5 Adley 读书 Adley 好文章分享文章标签： jquery 前端

本文为博主原创文章，未经博主允许不得转载。 Email: adleytales@126.com

本文链接：https://blog.csdn.net/adley_app/article/details/73225720

版权

Adley 好文章分享同时被 3 个专栏收录

30 篇文章 0 订阅

订阅专栏

Adley 读书

23 篇文章 0 订阅

订阅专栏

HTML5

12 篇文章 0 订阅

订阅专栏

关于使用jQuery前端上传文件

我们都知道 html中file类型的input可以直接读取本地的文件;
如果使用form表单的话，那么action = url 这就会上传完文件会刷新页面，返回值就会显示在页面区域，显然这并不是我们想要的。
所以要再用 ajax 技术，采用无刷新的上传文件。

代码如下：

html

<body>
     <input type="file" name="upfile" id="upfile"/>
     <input id="uploadBtn" type="submit" value="开始上传" />

     //引入jquery库
     <script src="../js/jquery-1.10.1.min.js"></script>
</body>

js

    var url = "http://192.168.100.151:7001/GDPaymentCenterServer_FromService/UploadFileServlet.do";

    $('#uploadBtn').on('tap', function(){

            fd.append("paragram", 12345); //上传的参数名 参数值 k-v键值对
            fd.append("upfile", $("#upfile").get(0).files[0]);//上传的文件file
            $.ajax({
                 url: url,
                 type: "POST",
                 processData: false,
                 contentType: false,
                 data: fd,
                 success: function(data) {
                    console.log(data);
                 }
            })
    })