基于jquery的异步上传，异步提交

柔光的暖阳◎ 2022-07-19 05:20 162阅读 0赞

1.明确需求，我需求是，需要选择多个文件，然后点击开始上传，把选中的文件上传，然后html默认上传文件的的input样式不好看，需要更换一个样式。

2.开始动手，首先，先更换样式，我的思路是隐藏input标签，另外的节点绑定这个隐藏标签的点击，html代码里面，有<a>标签和一个<input type="file" style="display:none;">，点击<a>标签可触发点击<input type="file" style="display:none;" >的点击事件。

3.然后，jquery的fileupload插件，在依赖JQuery的js基础上，再依赖以下三个重要的js包，其他包没啥用。自行到官网下载（ [http://blueimp.github.io/jQuery-File-Upload/][http_blueimp.github.io_jQuery-File-Upload]）。

<script src="js/vendor/jquery.ui.widget.js"></script>
    <script src="js/jquery.iframe-transport.js"></script>
    <script src="js/jquery.fileupload.js"></script>

4.上传代码：

var allsize = 0;    //文件总大小
      var fileNameArray=[];   //文件名数组
    $("#fileupload").fileupload({     //绑定添加文件按钮事件
            url:"files/upload",     //文件上传地址，当然也可以直接写在input的data-url属性内
            //dataType: 'json',     //可选用json格式提交数据
            formData:{filetype:filetype},     //需要绑定的数据，可要可不要。
            add: function(e, data) {     //当点击添加文件的时候所调用的方法，
                //限制每张图片大小
                if(data.files[0].size >= 1572864){
                    alert("每张图片大小不大于1.5M");
                    return false;
                }
                //限制最多只能上传15张图片
                if(fileNameArray.length>=15 ||data.originalFiles.length>=15){
                    alert("最多只能上传15个文件");
                    return false;
                }
                //判断文件是否存在
                if( $.inArray(data.files[0].name, fileNameArray) != -1){
                    alert("不允许上传同名文件或不允许上传该类型文件");
                    return false;
                }
                fileNameArray.push(data.files[0].name);     //把文件名加入到文件名数组里面
                allsize =allsize+ data.files[0].size;               //文件总大小
                $('.rz-table-ul').append('<li><span>'+data.files[0].name+'</span><span>'+bytesToSize(data.files[0].size)+'</span><span>未上传</span></li>');     //显示到上传列表里面，
                $('.allsize').html(bytesToSize(allsize));          //显示文件总大小
                $('#startUpload').click(function(){     //绑定开始上传按钮事件
                    data.submit();
                });
            },
            done:function(e,result){
                //done方法就是上传完毕的回调函数，其他回调函数可以自行查看api
                //注意result要和jquery的ajax的data参数区分，这个对象包含了整个请求信息
                //返回的数据在result.result中，假设我们服务器返回了一个json对象
                console.log(JSON.stringify(result.result));
            }

5.然后，就是后台接收和处理请求了（这部分不属于jquery讨论范围咯）。

[http_blueimp.github.io_jQuery-File-Upload]: http://blueimp.github.io/jQuery-File-Upload/

发表评论取消回复

表情：

评论列表（有 0 条评论，162人围观）

还没有评论，来说两句吧...

相关阅读

相关如何使用 jQuery 异步上传文件？

问：我想用 jQuery 异步上传文件。 $(document).ready(function () \{ $(“\uploadbutton”).click(func

迷南。/ 2024年03月30日 11:33/ 0 赞/ 68 阅读

相关使用jquery-form.js异步上传文件和提交表单

<!DOCTYPE html> <html> <head> <title></title> <meta charset=

向右看齐/ 2024年02月17日 14:33/ 0 赞/ 20 阅读

相关 Struts2中的异步提交（ajaxfileupload异步上传(图片)插件的使用）

服务器端采用struts2来处理文件上传。所需环境： jquery.js ajaxfileupload.js struts2所依赖的jar包及struts

Myth丶恋晨/ 2022年08月27日 02:27/ 0 赞/ 168 阅读

相关基于jquery的异步上传，异步提交

1.明确需求，我需求是，需要选择多个文件，然后点击开始上传，把选中的文件上传，然后html默认上传文件的的input样式不好看，需要更换一个样式。 2.开始动手，首

柔光的暖阳◎/ 2022年07月19日 05:20/ 0 赞/ 163 阅读

相关【jQuery】Jquery.form.js实现表单异步提交以及文件上传（带进度条）

jquery.form.js是一个非常强大的用于表单提交的插件。通过该插件，我们可以非常简单的实现表单的异步提交，并实现文件上传、进度条显示等等。 [Jquery官网下载

傷城~/ 2022年07月14日 14:48/ 0 赞/ 154 阅读

相关【jQuery】Jquery.form.js实现表单异步提交以及文件上传（带进度条）

jquery.form.js是一个非常强大的用于表单提交的插件。通过该插件，我们可以非常简单的实现表单的异步提交，并实现文件上传、进度条显示等等。 [Jquery官网下载

ゝ一纸荒年。/ 2022年07月14日 14:48/ 0 赞/ 240 阅读

相关 JQuery ajax 单按钮异步上传

1.导入ajaxfileupload.js 前往https://download.csdn.net/download/duguxingfeng/10277768

Bertha 。/ 2022年05月29日 20:18/ 0 赞/ 199 阅读

相关异步提交表单上传文件

一，引入jquery.min.js以及jquery.form.js插件（jquery.min.js必须是1.9以上版本支持） ![70][] 二，页面添加js代码

绝地灬酷狼/ 2022年05月26日 09:26/ 0 赞/ 285 阅读

相关 jQuery 异步提交表单

这个以前学过,但是后来工作用多了 MXFramework 的 RESTClient 做交互有些淡忘了虽然 RESTClient跟 ajax 差不太多,但还有区别今天复

小灰灰/ 2022年04月06日 07:45/ 0 赞/ 331 阅读

相关基于springboot的ajax异步文件上传

当我们在页面填写表格或资料的时候，大多数情况下选择文件并点击上传后我们并不会希望页面跳转，而是希望文件异步上传，我们则继续填写表格中的其他内容，今天遇到了这个问题，结合百度，整

电玩女神/ 2022年03月02日 11:22/ 0 赞/ 416 阅读