JQuery文件上传插件JQuery.upload.js的用法简介
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的用法简介的更多相关文章
- jQuery文件上传插件jQuery Upload File 有上传进度条
jQuery文件上传插件jQuery Upload File 有上传进度条 jQuery文件上传插件jQuery Upload File,插件使用简单,支持单文件和多文件上传,支持文件拖拽上传,有进度 ...
- 20款最好的jQuery文件上传插件
当它是关于开发网络应用程序和网页的时候,文件上传功能的重要性是不容忽视的.一个文件上传功能可以让你上传所有类型的文件在网站上,包括视频,图像,文件和更多.创建一个文件上传功能,对你的网站是不是很难,有 ...
- 强大的支持多文件上传的jQuery文件上传插件Uploadify
支持多文件上传的jQuery文件上传插件Uploadify,目前此插件有两种版本即Flash版本和HTML5版本,对于HTML5版本会比较好的支持手机浏览器,避免苹果手机Safari浏览器不支持Fla ...
- jQuery文件上传插件Uploadify(转)
一款基于flash的文件上传,有进度条和支持大文件上传,且可以多文件上传队列. 这款在flash的基础上增加了html5的支持,所以在移动端也可以使用. 由于官方提供的版本是flash免费,html5 ...
- jQuery 文件上传插件:uploadify、swfupload
jQuery 文件上传插件: uploadify.swfupload
- 可拖拽和带预览图的jQuery文件上传插件ssi-uploader
插件描述:ssi-uploader是一款带预览图并且可以拖拽文件的jQuery ajax文件上传插件.该文件上传插件支持AJAX,支持多文件上传,可控制上的文件格式和文件大小,提供各种回调函数,使用非 ...
- JQuery文件上传插件ajaxFileUpload在Asp.net MVC中的使用
0 ajaxFileUpload简介 ajaxFileUpload插件是一个非常简单的基于Jquery的异步上传文件的插件,使用过程中发现很多与这个同名的,基于原始版本基础之上修改过的插件,文件版本比 ...
- JQuery文件上传插件uploadify在MVC中Session丢失的解决方案
<script type="text/javascript"> var auth = "@(Request.Cookies[FormsAuthenticati ...
- jQuery文件上传插件uploadify
官方网站:http://www.uploadify.com/ 参考博客:jQuery Uploadify在ASP.NET MVC3中的使用 参考博客:使用uploadify上传图片时返回“Cannot ...
随机推荐
- Java实现 蓝桥杯VIP 算法提高 格子位置
算法提高 格子位置 时间限制:1.0s 内存限制:512.0MB 问题描述 输入三个自然数N,i,j (1<=i<=N,1<=j<=N),输出在一个N*N格的棋盘中,与格子(i ...
- Java实现 LeetCode 55 跳跃游戏
55. 跳跃游戏 给定一个非负整数数组,你最初位于数组的第一个位置. 数组中的每个元素代表你在该位置可以跳跃的最大长度. 判断你是否能够到达最后一个位置. 示例 1: 输入: [2,3,1,1,4] ...
- Android中WebView如何加载JavaScript脚本
主Activity和XML布局,末尾附上效果图 package com.example.myapplication; import androidx.appcompat.app.AppCompatAc ...
- python numpy 库
引用文章:https://blog.csdn.net/xjl271314/article/details/80409034
- Centos7 搭建KVM并创建Linux Windows虚拟机
一.安装KVM 查看系统版本 cat /etc/redhat-release 关闭防火墙及selinux systemctl disable firewalld.service 查看防 ...
- Flask 的配置文件
Flask 的配置文件 四种方法给 Flask 做配置 1直接给 app 对象赋值属性 以字典的形式,给flask做配置 以文件的形式,给flask做配置(django 就是用这种) 以类的形式,给f ...
- AttributeError: 'PyQt5.QtCore.pyqtSignal' object has no attribute 'connect'
pyqt5信号要定义为类属性 #!/usr/bin/python3 # -*- coding: utf-8 -*- from PyQt5.Qt import * import sys class Wi ...
- spring源码解读-aop
aop是指面向切面编程,ProxyFactoryBean是spring aop的底层实现与源头,为什么这么说呢?首先我们看一段配置: 1.target是目标对象,需要对其进行切面增强 2.proxyI ...
- 排队I(替换两层复杂for循环、避免TLE)
问题 C: 排队I(点击) 时间限制: 1 Sec 内存限制: 128 MB ...
- Java对象转换Json的细节处理
一.fastJson 1.fastJson在转换java对象为json的时候,默认是不序列化null值对应的key的 也就是说当对象里面的属性为空的时候,在转换成json时,不序列化那些为null值的 ...