| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
ec3y
9年前发布

jQuery File Upload 的基本使用

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 

 本文由用户 ec3y 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1430888837366.html
文件上传 jQuery File Upload