文档章节

jQuery File Upload 的基本使用

不正经啊不正经
 不正经啊不正经
发布于 2015/01/04 14:32
字数 224
阅读 10480
收藏 5

jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示;支持各种动态语言开发的服务器端。

jquery-file-upload

一、最少配置

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery File Upload Example</title>
</head>
<body>
<input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/vendor/jquery.ui.widget.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script><script>$(function () {    $('#fileupload').fileupload({        dataType: 'json',        done: function (e, data) {            $.each(data.result.files, function (index, file) {                $('<p/>').text(file.name).appendTo(document.body);            });        }    });});</script></body> 
</html>

二、上传进度显示

$('#fileupload').fileupload({    /* ... */
    progressall: function (e, data) {        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(            'width',
            progress + '%'
        );
    }
});
<div id="progress">
    <div class="bar" style="width: 0%;"></div>
</div> 
.bar {    height: 18px;
    background: green;}

附上官网API地址:https://github.com/blueimp/jQuery-File-Upload/wiki/API

文档地址:https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin 

© 著作权归作者所有

不正经啊不正经
粉丝 54
博文 175
码字总数 133499
作品 0
宁波
私信 提问
20+ 个很棒的 jQuery 文件上传插件或教程

文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验。本文介绍20个jQuery的文件上传插件,其中有一些是教程。 1. Plupload Plupload 是一个Web浏览...

红薯
2011/08/03
50.6K
9
10个强大的Ajax jQuery文件上传程序

上传文件和图片是许多网站的一个常用功能,无论是让注册用户上传一个个人资料图片还是上传文件共享,都离不开上传程序,虽然有很多种实现方法,但要让上传看起来更酷一点,如显示剩余时间,同...

SeanCai
2010/11/08
6.6K
1
240多个jQuery插件(1)

文件上传(File upload) Ajax File Upload. jQUploader. Multiple File Upload plugin. jQuery File Style. Styling an input type file. Progress Bar Plugin. 表单验证(Form Validation) j......

五味格子
2011/05/11
172
0
基于jQuery很牛X的批量上传插件

上传功能应该是每个网站必备的工具之一,因此出现了出现了很多各式各样的上传插件! 本文基于个人经验和使用从插件的:交互体验,易用性,文档,美观度出发,为大家推荐三款很NX的批量上传插件...

voole
2013/11/16
15.9K
0
采用Docker集成jquery-file-upload组件到WEB应用

1,Docker镜像 jQuery-File-Upload 组件是一个非常好用的文件上传组件,有很多友好的特性: 支持文件多选 拖拽上传 上传进度条 取消上传 图片、音视频预览 纯JS和HTML5代码,不需额外安装插件...

cbbing
2017/06/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Java常见异常处理

异常是Java程序中经常遇到的问题,一个异常就是一个Bug,就要花很多时间来定位异常。 Java异常 (1)Throwable是Java异常的顶级类,所有的异常都继承于这个类。 (2)Error,Exception是异常...

daxiongdi
34分钟前
4
0
Validator 常用注解

说明 Validator主要是校验用户提交的数据的合理性的,比如是否为空了,密码长度是否大于6位,是否是纯数字的,等等。那么在spring boot怎么使用这么强大的校验框架呢。 常用 [@null](https:...

五彩的颜色
43分钟前
3
0
输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序。

#1 先把入栈顺序的第一数据入栈, #2 if 入栈的数据==等于出栈的数据,就循环一次看是否新建的栈的数据是否出栈 #3 返回新建的栈是否为空,就是要的结果 public class Solution { public boo...

winkwink
49分钟前
4
0
《JAVA核心知识》学习笔记 (19. 数据库)

19.1.1. 存储引擎 19.1.1.1. 概念 数据库存储引擎是数据库底层软件组织,数据库管理系统(DBMS)使用数据引擎进行创建、查询、 更新和删除数据。不同的存储引擎提供不同的存储机制、索引技巧...

Shingfi
55分钟前
4
0
三分钟手操自己的yum源

本文章原创首发公众号:编程三分钟 上次就想手操yum源了,考虑到有的朋友没接触过,直接写成了yum源的科普,活活憋了我一个星期,现在我们快快开始。 什么情况下我们需要搭建一个仓库呢? 记...

编程三分钟
58分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部