jquery实现多文件上传

最新推荐文章于 2019-09-12 15:04:13 发布
最新推荐文章于 2019-09-12 15:04:13 发布
阅读量211 收藏
点赞数
分类专栏： ajax 文章标签： jQuery XHTML HTML ViewUI
参考http://www.fyneworks.com/jquery/multiple-file-upload/#tab-Examples
经过整理如下:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>jQuery Multiple File Upload Plugin v1.46 (2009-05-12)</title>
<!--// documentation resources //-->
<script src="lib/jquery.js" type="text/javascript"></script>

<script src="lib/jquery.MultiFile.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<h2>Using HTML</h2>
<table summary="MultiFile Upload Demos" width="100%" cellspacing="10">
<tr>
<td valign="top" width="33%">
<fieldset style="border:0">
<legend><strong>Example 1</strong></legend>
<code class="">
class="multi" maxlength="2"
</code>
<div class="P5 B">
Limit: 2 files.
<br/>
Allowed extensions: any.
</div>
<form action="" class="P10">
<input type="file" class="multi" maxlength="2"/>
</form>
</fieldset>
</td>
<td valign="top" width="33%">
<fieldset style="border:0">
<legend><strong>Example 2</strong></legend>
<code class="">
class="multi" accept="gif|jpg"
</code>
<div class="P5 B">
Limit: no limit.
<br/>
Allowed extensions: gif and jpg.
</div>
<form action="" class="P10">
<input type="file" class="multi" accept="gif|jpg"/>
</form>
</fieldset>
</td>
<td valign="top" width="33%">
<fieldset style="border:0">
<legend><strong>Example 3</strong></legend>
<code class="">
class="multi" accept="gif|jpg" maxlength="3"
</code>
<div class="P5 B">
Limit: 3 files
<br/>
Allowed extensions: gif, jpg.
</div>
<form action="" class="P10">
<input type="file" class="multi" accept="gif|jpg" maxlength="3"/>
</form>
<div class="P5 Warning Bold">
Note that server-side validation is always required
</div>
</fieldset>
</td>
</tr>
</table>

<hr/>

<h2>Using class property</h2>
<table summary="MultiFile Upload Demos" width="100%" cellspacing="10">
<tr>
<td valign="top" width="33%">
<fieldset style="border:0">
<legend><strong>Example 4</strong></legend>
<code class="">
class="multi max-2"
</code>
<div class="P5 B">
Limit: 2 files.
<br/>
Allowed extensions: any.
</div>
<form action="" class="P10">
<input type="file" class="multi max-2"/>
</form>
</fieldset>
</td>
<td valign="top" width="33%">
<fieldset style="border:0">
<legend><strong>Example 5</strong></legend>
<code class="">
class="multi accept-gif|jpg"
</code>
<div class="P5 B">
Limit: no limit.
<br/>
Allowed extensions: gif, jpg.
</div>
<form action="" class="P10">
<input type="file" class="multi accept-gif|jpg"/>
</form>
</fieldset>
</td>
<td valign="top" width="33%">
<fieldset style="border:0">
<legend><strong>Example 6</strong></legend>
<code class="">
class="multi max-3 accept-gif|jpg"
</code>
<div class="P5 B">
Limit: 3 files
<br/>
Allowed extensions: gif, jpg.
</div>
<form action="" class="P10">
<input type="file" class="multi max-3 accept-gif|jpg"/>
</form>
<div class="P5 Warning Bold">
Note that server-side validation is always required
</div>
</fieldset>
</td>
</tr>
</table>

<hr/>

<h2>Moving the file list</h2>
<table summary="MultiFile Upload Demos" width="100%" cellspacing="10">
<tr>
<td valign="top" width="50%">
<fieldset style="border:0">
<legend><strong>Example 7</strong></legend>
<p>This example populates the file list in a custom element</p>
<pre class="code"><code class="js">$(function(){ // wait for document to load
$('#T7').MultiFile({
list: '#T7-list'
});
});</code></pre>
<script type="text/javascript" language="javascript">
$(function(){ // wait for document to load
$('#T7').MultiFile({
list: '#T7-list'
});
});
</script>
</fieldset>
</td>
<td valign="top" width="50%">
<form action="" class="P10">
<input type="file" id="T7"/>
</form>
<div id="T7-list" style="border:#999 solid 3px; padding:10px;">
This is div#T7-list - selected files will be populated here...
<br/><br/>
</div>
</td>
</tr>
</table>


<hr/>

<h2>Customising the file list</h2>
<table summary="MultiFile Upload Demos" width="100%" cellspacing="10">
<tr>
<td valign="top" width="50%">
<fieldset style="border:0">
<legend><strong>Example 8 A</strong></legend>
<p>Use a custom 'remove' image in the file list</p>
<pre class="code"><code class="js">$(function(){ // wait for document to load
$('#T8A').MultiFile({
STRING: {
remove: '<img src="/@/bin.gif" height="16" width="16" alt="x"/>'
}
});
});</code></pre>
<script type="text/javascript" language="javascript">
$(function(){ // wait for document to load
$('#T8A').MultiFile({
STRING: {
remove: '<img src="/@/bin.gif" height="16" width="16" alt="x"/>'
}
});
});
</script>
</fieldset>
</td>
<td valign="top" width="50%">
<form action="" class="P10">
<input type="file" id="T8A"/>
</form>
</td>
</tr>
</table>

<table summary="MultiFile Upload Demos" width="100%" cellspacing="10">
<tr>
<td valign="top" width="50%">
<fieldset style="border:0">
<legend><strong>Example 8 B</strong></legend>
<p>Customising all list content</p>
<pre class="code"><code class="js">$(function(){ // wait for document to load
$('#T8B').MultiFile({
STRING: {
file: '<em title="Click to remove" οnclick="$(this).parent().prev().click()">$file</em>',
remove: '<img src="/@/bin.gif" height="16" width="16" alt="x"/>'
}
});
});</code></pre>
<script type="text/javascript" language="javascript">
$(function(){ // wait for document to load
$('#T8B').MultiFile({
STRING: {
file: '<em title="Click to remove" οnclick="$(this).parent().prev().click()">$file</em>',
remove: '<img src="/@/bin.gif" height="16" width="16" alt="x"/>'
}
});
});
</script>
</fieldset>
</td>
<td valign="top" width="50%">
<form action="" class="P10">
<input type="file" id="T8B"/>
</form>
</td>
</tr>
</table>

<hr/>

<h2>Using events</h2>
<table summary="MultiFile Upload Demos" width="100%" cellspacing="10">
<tr>
<td valign="top" width="50%">
<fieldset style="border:0">
<legend><strong>Example 9</strong></legend>
<p>
The events available are:<br/>
onFileAppend, afterFileAppend,
onFileSelect, afterFileSelect,
onFileRemove, afterFileRemove
</p>
<p>
The arguments passed on to each event handler are:<br/>
element: file element which triggered the event<br/>
value: the value of the element in question<br/>
master_element: the original element containing all relevant settings
</p>
<pre class="code"><code class="js">$(function(){ // wait for document to load
$('#T9').MultiFile({
onFileRemove: function(element, value, master_element){
$('#F9-Log').append('<li>onFileRemove - '+value+'</li>')
},
afterFileRemove: function(element, value, master_element){
$('#F9-Log').append('<li>afterFileRemove - '+value+'</li>')
},
onFileAppend: function(element, value, master_element){
$('#F9-Log').append('<li>onFileAppend - '+value+'</li>')
},
afterFileAppend: function(element, value, master_element){
$('#F9-Log').append('<li>afterFileAppend - '+value+'</li>')
},
onFileSelect: function(element, value, master_element){
$('#F9-Log').append('<li>onFileSelect - '+value+'</li>')
},
afterFileSelect: function(element, value, master_element){
$('#F9-Log').append('<li>afterFileSelect - '+value+'</li>')
}
});
});</code></pre>
<script type="text/javascript" language="javascript">
$(function(){ // wait for document to load
$('#T9').MultiFile({
onFileRemove: function(element, value, master_element){
$('#F9-Log').append('<li>onFileRemove - '+value+'</li>')
},
afterFileRemove: function(element, value, master_element){
$('#F9-Log').append('<li>afterFileRemove - '+value+'</li>')
},
onFileAppend: function(element, value, master_element){
$('#F9-Log').append('<li>onFileAppend - '+value+'</li>')
},
afterFileAppend: function(element, value, master_element){
$('#F9-Log').append('<li>afterFileAppend - '+value+'</li>')
},
onFileSelect: function(element, value, master_element){
$('#F9-Log').append('<li>onFileSelect - '+value+'</li>')
},
afterFileSelect: function(element, value, master_element){
$('#F9-Log').append('<li>afterFileSelect - '+value+'</li>')
}
});
});
</script>
</fieldset>
</td>
<td valign="top" width="50%">
<form action="" class="P10">
<input type="file" id="T9"/>
</form>
<div style="border:#999 solid 3px; padding:10px;">
This is div#F9-Log - selected files will be populated here...
<br/>
<ul id="F9-Log">
</ul>
</div>
</td>
</tr>
</table>
<hr/>
</body>
</html>
pp263020776
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现多文件上传
hexiaohu2009的专栏
12-23 1384
jQuery实现多文件上传           在开发中往往要在一个页面中实现多个文件上传，在前端就要相应的给用户实现方便的功能和效果。   JavaScript可以实现这种需求，今天跟大家分享用jQuery实现这种效果。    图  ~~~~   1.效果 点击     点击   点击remove后就删掉该条目，点击more又添加新的条目。   2.htm
jQuery多文件上传
小马过河
06-12 3660
引入js和css样式 &lt;script src="jquery/1.7.1/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script src="jquery.uploadify.min.js" type="text/javascript"&gt;&lt;/script&gt; &
利用Jquery实现批量上传
08-05
NULL 博文链接：https://sha1064616837.iteye.com/blog/2036988
JQuery实现多文件上传
jcxch的专栏
03-28 1257
由于考试系统的需求,需要将听力文件或是图片上传到服务器中的数据库中,而文件又是很多.若是一个一个的上传,是很费事的.为了避免时间和精力的浪费,人性化.实现了多文件上传. Uploadify是JQuery的一个上传插件，实现的效果非常不错，带进度显示.   官方下载 官方文档   下面讲解 1如何实现上传多文件. 2是解决如何实现大文件上传   首先创建解决方案,添加jq
jQuery多文件上传的实例
weixin_33674976的博客
09-03 247
为什么80%的码农都做不了架构师？>>> ...
用Jquery实现多文件上传
livening的专栏
07-23 2576
今天的文章将会演示怎样用Jquery上传多个文件，Fyneworks.com 已经创建了一个 ‘jQuery Multiple File Upload 插件’. 下载地址为http://www.fyneworks.com/jquery/multiple-file-upload/按照作者的描述，这个多文件上传插件(jQuery.MultiFile)是一个non-obstrusive (无阻碍？)
php jquery 多文件上传简单实例
10-26
主要介绍了php jquery 多文件上传简单实例，有需要的朋友可以参考一下
Jquery实现跨域异步上传文件总结
12-12
我们需要换个思路去干这事，让服务端去重写向我们的客户端，由客户端（与文件上传页面在同域下）来返回相关数据即可。 1、Jquery.form的使用 <form method="post" action=...
jQuery实现文件上传进度条特效
10-23
带进度条的文件上传特效，每个文件都有进度条，都有上传详情介绍。效果非常不错，这里推荐给大家。
jQuery结合C#实现上传文件的方法
12-31
本文实例讲述了jQuery结合C#实现上传文件的方法。分享给大家供大家参考。具体实现方法如下： <html xmlns=http://www.w3.org/1999/xhtml> <head id=Head1 runat=server> [removed][removed] [removed...
一个jquery 的多文件上传示例
04-14
一个jquery 的多文件上传示例，asp.net 版本，基本都有了
jquery多文件上传 demo.zip
05-27
jquery多文件上传 demo。 jquery多文件上传。 jquery多文件上传 jquery上传
jquery实现多附件上传
12-30
jquery实现单附件，多附件上传demo
基于HTML5的jquery文件上传插件（多文件选择、带进度条、完整可用）
02-21
俺亲手写的： 1.支持多文件上传 2.带进度条 3.可以显示文件名称 4.可以实时显示已上传的大小 5.可以从队列中删除 6.各元素的样式都可以自己控制
个人笔记018--JQ实现多文件上传
Dream02_05的博客
09-12 268
这是挺久之前借鉴别人的一篇多图上传博客，经过多少改动后弄出来的，昨天跟后台同事测试刚好用到，今天再整理一下就发出来了，话不多说，直接上图片和代码： <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>多文件上传</title> ...
强大的支持多文件上传的jQuery文件上传插件Uploadify
weixin_34279061的博客
05-31 597
支持多文件上传的jQuery文件上传插件Uploadify，目前此插件有两种版本即Flash版本和HTML5版本，对于HTML5版本会比较好的支持手机浏览器，避免苹果手机Safari浏览器不支持Flash，主要特性：支持多文件上传、HTML5版本可拖拽上传、实时上传进度条显示、强大的参数定制功能，如文件大小、文件类型、按钮图片定义、上传文件脚本等。   Flash版本使用方法： 1.加载JS...
JQuery异部上传多个文件
12-27 178
这个例子需要用到JQuery和一个JQuery插件ajaxupload.js,不说太多。直接上代码： 前台： <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script src="Scripts/ajaxupload.js" type=...
jQuery 多文件上传
charset_ok的博客
05-02 4148
第二篇——控件这一篇将会使用Jquery替代HTML5的上传控件，并增加文件信息展示和上传进度条。首先我们需要下载JqueryUploadify这一个控件包（注2提供下载链接地址），里面包含以下几个引用：&lt;script src="/js/jquery-1.3.2.min.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script sr...
(牛人莫入)Jquery plugin --------多文件上传
weixin_34178244的博客
05-13 119
在ASP.NET 中关于文件的上传有很多种;所谓的上传有有两种含意:第一种:就是说把文件保存在数据库;第二种就是保存在 一个指定的文件夹下; 今天给大家介绍一所很简单多文件上传方式;通过JQ Plugin插件的形式来达到上传文件的效果;这种文件上传的方式,简单,灵活 只是能过属性的配置就可以完成上传大部分的工作: 项目目录列表: 第一步:引入Jquery相关的JS文件: &lt;...
jquery实现表单文件上传
最新发布
04-02
jQuery可以很方便地实现表单文件上传。以下是一个简单的实例： HTML代码： ``` <div id="message"></div> ``` JavaScript代码： ``` $(document).ready(function(){ $('#myForm').submit(function(event)...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值