JQuery文件上传插件,这个插件很小,用法很简单,效果却很棒。
注意:JQuery版本要求1.8及以上,大家执行如果没效果,则检查JQuery版本,如果是1.8及以上,则该插件源码中的.size()需要替换为.length,在2019-12-30以后向我要源码的不用担心这个问题,已经修正了。
先看看效果图:

是不是很简洁清爽,后台Java文件接收类就不贴了,都是一样的。

注意:为了简洁的接收上传文件的相关信息,后台凡是在涉及上传文件的实体类,都增加字段‘upload’。

1、HTML部分:
只需添加一行就行:

<div class="upload" id="case" name="case" action="/userinfo/upload" data-num="2" data-type="jpg,pdf,docx" data-size="10240" data-value=""></div>

说明:

  action:接收文件的url,如action="/userinfo/upload"
  data-num:允许上传文件的数量,如data-num="2"
  data-type:允许上传文件的格式,如data-type="jpg,pdf,docx"
  data-size:单个文件的大小限制,单位KB,如data-size="10240"(10M)
  data-value:没上上传成功后,接收到的信息(其实没啥用)

另外:通过浏览器的开发者模式,可以看见每次操作时的源码格式如下(删除了无关紧要的代码):

<div class="upload multiple" id="case" name="case" action="/userinfo/upload" data-num="2" data-type="jpg,pdf,docx" data-size="10240" data-value="D:\uploadfile\201811\img20181101161350637.docx">
<li class="item success"data-filename="HBRCzCikp-BePC1EFWq5TB">
<div class="filename">我国道路运输信息化建设现状与发展对策.pdf</div>
</li>
<li class="item success"data-filename="HBRCzCikp-BePC1EFWq5TB">
<div class="filename">2015-07-15_信息技术研发部项目补贴的申请.docx</div>
</li>
<input type="file" name="file" multiple="multiple">
<input type="hidden" name="upload" value="D:\uploadfile\201811\img20181101161345884.pdf,D:\uploadfile\201811\img20181101161350637.docx">
</div>

注意:name=‘upload’的表单,实际上传的形如:D:\uploadfile\201811\img20181101164635272.doc,D:\uploadfile\201811\img20181101164643973.pdf,我们的检测装置示意图及待检测的振动说明.doc,我国道路运输信息化建设现状与发展对策.pdf。

2、JS部分:

js中只有一行代码就搞定:

$("#case").upload();

为了同时把原文件名和服务器上保存该文件的全路径,需要在提交保单前,增加如下代码,以便通过name="upload"来传递文件原名称和保存路径(只针对文件,图片没有原文件名称)

 $(".filename").each(function(){
$("[name=upload]").val($("[name=upload]").val()+','+$(this).html());
});

有关web项目开发相关的知识点,大家如果感兴趣,可以看视频介绍:https://edu.51cto.com/sd/091c7, 希望对大家有所帮助。

JQuery文件上传插件JQuery.upload.js的用法简介的更多相关文章

  1. jQuery文件上传插件jQuery Upload File 有上传进度条

    jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...

  2. 20款最好的jQuery文件上传插件

    当它是关于开发网络应用程序和网页的时候,文件上传功能的重要性是不容忽视的.一个文件上传功能可以让你上传所有类型的文件在网站上,包括视频,图像,文件和更多.创建一个文件上传功能,对你的网站是不是很难,有 ...

  3. 强大的支持多文件上传的jQuery文件上传插件Uploadify

    支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...

  4. jQuery文件上传插件Uploadify(转)

    一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列. 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用. 由于官方提供的版本是flash免费,html5 ...

  5. jQuery 文件上传插件:uploadify、swfupload

    jQuery 文件上传插件: uploadify.swfupload

  6. 可拖拽和带预览图的jQuery文件上传插件ssi-uploader

    插件描述:ssi-uploader是一款带预览图并且可以拖拽文件的jQuery ajax文件上传插件.该文件上传插件支持AJAX,支持多文件上传,可控制上的文件格式和文件大小,提供各种回调函数,使用非 ...

  7. JQuery文件上传插件ajaxFileUpload在Asp.net MVC中的使用

    0 ajaxFileUpload简介 ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件,使用过程中发现很多与这个同名的,基于原始版本基础之上修改过的插件,文件版本比 ...

  8. JQuery文件上传插件uploadify在MVC中Session丢失的解决方案

    <script type="text/javascript"> var auth = "@(Request.Cookies[FormsAuthenticati ...

  9. jQuery文件上传插件uploadify

    官方网站:http://www.uploadify.com/ 参考博客:jQuery Uploadify在ASP.NET MVC3中的使用 参考博客:使用uploadify上传图片时返回“Cannot ...

随机推荐

  1. Java实现 蓝桥杯VIP 算法提高 格子位置

    算法提高 格子位置 时间限制:1.0s 内存限制:512.0MB 问题描述 输入三个自然数N,i,j (1<=i<=N,1<=j<=N),输出在一个N*N格的棋盘中,与格子(i ...

  2. Java实现 LeetCode 55 跳跃游戏

    55. 跳跃游戏 给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素代表你在该位置可以跳跃的最大长度. 判断你是否能够到达最后一个位置. 示例 1: 输入: [2,3,1,1,4] ...

  3. Android中WebView如何加载JavaScript脚本

    主Activity和XML布局,末尾附上效果图 package com.example.myapplication; import androidx.appcompat.app.AppCompatAc ...

  4. python numpy 库

    引用文章:https://blog.csdn.net/xjl271314/article/details/80409034

  5. Centos7 搭建KVM并创建Linux Windows虚拟机

    一.安装KVM   查看系统版本 cat /etc/redhat-release     关闭防火墙及selinux   systemctl disable firewalld.service 查看防 ...

  6. Flask 的配置文件

    Flask 的配置文件 四种方法给 Flask 做配置 1直接给 app 对象赋值属性 以字典的形式,给flask做配置 以文件的形式,给flask做配置(django 就是用这种) 以类的形式,给f ...

  7. AttributeError: 'PyQt5.QtCore.pyqtSignal' object has no attribute 'connect'

    pyqt5信号要定义为类属性 #!/usr/bin/python3 # -*- coding: utf-8 -*- from PyQt5.Qt import * import sys class Wi ...

  8. spring源码解读-aop

    aop是指面向切面编程,ProxyFactoryBean是spring aop的底层实现与源头,为什么这么说呢?首先我们看一段配置: 1.target是目标对象,需要对其进行切面增强 2.proxyI ...

  9. 排队I(替换两层复杂for循环、避免TLE)

    问题 C: 排队I(点击) 时间限制: 1 Sec  内存限制: 128 MB                                                             ...

  10. Java对象转换Json的细节处理

    一.fastJson 1.fastJson在转换java对象为json的时候,默认是不序列化null值对应的key的 也就是说当对象里面的属性为空的时候,在转换成json时,不序列化那些为null值的 ...