帮酷LOGO
  • 显示原文与译文双语对照的内容
文章标签:POST  pos  files  桌面  plugin  URL  drag-drop  DES  
jQuery plugin - drag and drop desktop files and POST to a URL to handle files.

  • 源代码名称:jquery-filedrop
  • 源代码网址:http://www.github.com/weixiyen/jquery-filedrop
  • jquery-filedrop源代码文档
  • jquery-filedrop源代码下载
  • Git URL:
    git://www.github.com/weixiyen/jquery-filedrop.git
  • Git Clone代码到本地:
    git clone http://www.github.com/weixiyen/jquery-filedrop
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/weixiyen/jquery-filedrop
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • jQuery filedrop插件

    将桌面文件拖到浏览器中

    jQuery filedrop使用HTML5文件API允许用户将多个文件从桌面拖到浏览器,将每个文件上传到指定的URL 。

    filedrop使用 HTML5 FileReader() 读取文件数据。

    浏览器支持

    在 Chrome,Firefox 3.6 +,IE10+和 Opera 12 + 上工作。

    对Safari支持的贡献。

    filedrop还允许用户定义函数来处理 BrowserNotSupported 错误。

    用法示例

    $('#dropzone').filedrop({
     fallback_id:'upload_button', // an identifier of a standard file input element, becomes the target of"click" events on the dropzone fallback_dropzoneClick :true, // if true, clicking dropzone triggers fallback file selection and the fallback element is made invisible. url:'upload.php', // upload handler, handles each file separately, can also be a function taking the file and returning a url paramname:'userfile', // POST parameter name used on serverside to reference file, can also be a function taking the filename and returning the paramname withCredentials:true, // make a cross-origin request with cookies data: {
     param1:'value1', // send POST variablesparam2:function(){
     return calculated_data; // calculate data at time of upload },
     },
     headers: { // Send additional request headers'header':'value' },
     error:function(err, file) {
     switch(err) {
     case'BrowserNotSupported':
     alert('browser does not support HTML5 drag and drop')
     break;
     case'TooManyFiles':
     // user uploaded more than 'maxfiles'break;
     case'FileTooLarge':
     // program encountered a file whose size is greater than 'maxfilesize'// FileTooLarge also has access to the file which was too large// use file.name to reference the filename of the culprit filebreak;
     case'FileTypeNotAllowed':
     // The file type is not in the specified list 'allowedfiletypes'break;
     case'FileExtensionNotAllowed':
     // The file extension is not in the specified list 'allowedfileextensions'break;
     default:
     break;
     }
     },
     allowedfiletypes: ['image/jpeg','image/png','image/gif'], // filetypes allowed by Content-Type. Empty array means no restrictions allowedfileextensions: ['.jpg','.jpeg','.png','.gif'], // file extensions allowed. Empty array means no restrictions maxfiles:25,
     maxfilesize:20, // max file size in MBsdragOver:function() {
     // user dragging files over #dropzone },
     dragLeave:function() {
     // user dragging files out of #dropzone },
     docOver:function() {
     // user dragging files anywhere inside the browser document window },
     docLeave:function() {
     // user dragging files out of the browser document window },
     drop:function() {
     // user drops file },
     uploadStarted:function(i, file, len){
     // a file began uploading// i = index => 0, 1, 2, 3, 4 etc// file is the actual file of the index// len = total files user dropped },
     uploadFinished:function(i, file, response, time) {
     // response is the data you got back from server in JSON format. },
     progressUpdated:function(i, file, progress) {
     // this function is used for large files and updates intermittently// progress is the integer value of file being uploaded percentage to completion },
     globalProgressUpdated:function(progress) {
     // progress for all the files uploaded on the current instance (percentage)// ex: $('#progress div').width(progress+"%"); },
     speedUpdated:function(i, file, speed) {
     // speed in kb/s },
     rename:function(name) {
     // name in string format// must return alternate name as string },
     beforeEach:function(file) {
     // file is a file object// return false to cancel upload },
     beforeSend:function(file, i, done) {
     // file is a file object// i is the file index// call done() to start the upload },
     afterAll:function() {
     // runs after all files have been uploaded or otherwise dealt with }
    });

    排队使用示例

    为了启用大量文件上传,添加了一个排队选项,使你能够配置多少文件。 上传将并行处理该数字,然后在队列中备份,然后在队列中处理它的余的空白插槽。

    这是通过以下两个参数之一控制的:

    maxfiles:10// Limit the total number of uploads possible - default behaviourqueuefiles:2// Control how many uploads are attempted in parallel (ignores maxfiles setting)

    不设置 queuefiles的值将禁用排队。

    捐赠



    文章标签:plugin  文件  files  DES  pos  POST  桌面  URL  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语