- 浏览: 1096085 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (290)
- php (65)
- javascript (36)
- html5 (31)
- thinkphp (9)
- mysql (16)
- jquery (13)
- node.js (9)
- css (9)
- android 开发 (8)
- flex (5)
- java (3)
- apache (8)
- linux (8)
- git (5)
- web (5)
- wordpress (9)
- mongodb (2)
- redis (5)
- yaf (6)
- python (4)
- big data (1)
- sphinx (1)
- html (1)
- bootstrap (1)
- vue (1)
- laravel (1)
- test (0)
最新评论
-
July01:
推荐用StratoIO打印控件,支持网页、URL、图片、PD、 ...
如何解决非IE浏览器的web打印 -
flashbehappy:
同一个视频,有mp4,ogg两种格式的。在chrome,fir ...
firefox chrom safari 对video标签的区别 -
xmdxzyf:
可以在网站(www.sosoapi.com)上试下在线表单方式 ...
用swagger-php/ui做API测试 -
flex_莫冲:
a2631500 写道"看了源码,设置Backbon ...
backbone与php交互 -
a2631500:
"看了源码,设置Backbone.emulateJS ...
backbone与php交互
1 自定義上傳錯誤/進度提示位置
'queueID':"uploadifive-uploadFileBtn-queue-custom",
若定義了queueID,則會用你自定義的id的element來顯示上傳的錯誤提示或進度提示
插件源碼,若定義了queueID,則用自定義的ID來當容器
2 overrideEvents:重寫event
若不享用插件默認的event,可以定義'overrideEvents':["onCancel","onError","onAddQueueItem"],並定義對應的event function
當然,一定要參考插件的寫法,否則會出錯的。例如addQueueItem,必須定義file.queueItem
如果沒有則在上傳時找不到file.queueItem,會提示錯誤
3 buttonClass:自定義button樣式
可以在這裡添加上多個自定義的class,用空格隔開
源碼
4
'auto' : true,// 選擇文件後自動上傳
'fileSizeLimit' : '10MB',//上傳文件大小限制
'fileType' : ["jpg","png","jpeg"],//上傳文件類型限制
'width' : 150,//上傳按鈕寬度
'height' : 38,// 上傳按鈕高度
buttonText : "Upload File", //上傳按鈕文字
'dnd' : true, //允許拖放上
'formData' : {'PHPSESSID' : '<?php echo session_id(); ?>'},// 附帶form參數。常用的比如session等
'onUploadComplete':function(){}//上傳完成後執行的function
'removeCompleted':true // =true,上傳完後觸發onCancel,刪除上傳提示或錯誤提示。會調用自定義onCancel
見源碼
5 'uploadScript': "/upload_file",// 服務器端處理路徑
6 'multi' : false //是否支持同時選擇多個文件
7 'simUploadLimit' : 0, // The maximum number of files to upload at once 一次上傳文件的最大數量
見源碼
8 'queueSizeLimit' : 0, // The maximum number of files that can be in the queue
9 'truncateLength' : 0, // The length to truncate the file names to
10 'uploadLimit' : 0, // The maximum number of files you can upload 這是多次上傳file的最大文件數量限制。
uploadLimit 的設置會驗證uploads.count(注意,不是queue.count)
源碼
11 'dropTarget' : false, // Selector for the drop target
特別技巧:
有些類型的文件用js獲取不到file.typ。比如crt證書類型的文件。依然會執行upload,在後台判斷後返回錯誤信息。這時,JS可以獲取到錯誤信息,如果想用uploadifive默認的錯誤提示方式來顯示錯誤信息應該怎麼做呢?
研究源碼後發現,錯誤信息的處理在error函數中。因此可以直接調用error函數,傳遞errory_type處理。參考demo
'queueID':"uploadifive-uploadFileBtn-queue-custom",
若定義了queueID,則會用你自定義的id的element來顯示上傳的錯誤提示或進度提示
插件源碼,若定義了queueID,則用自定義的ID來當容器
// Create the queue container if (!settings.queueID) { settings.queueID = settings.id + '-queue'; $data.queueEl = $('<div id="' + settings.queueID + '" class="uploadifive-queue" />'); $data.button.after($data.queueEl); } else { $data.queueEl = $('#' + settings.queueID); }
2 overrideEvents:重寫event
若不享用插件默認的event,可以定義'overrideEvents':["onCancel","onError","onAddQueueItem"],並定義對應的event function
onAddQueueItem:function(){}, onCancel:functio(){}, onError:functio(){},
當然,一定要參考插件的寫法,否則會出錯的。例如addQueueItem,必須定義file.queueItem
如果沒有則在上傳時找不到file.queueItem,會提示錯誤
3 buttonClass:自定義button樣式
可以在這裡添加上多個自定義的class,用空格隔開
源碼
if (settings.buttonClass) $data.button.addClass(settings.buttonClass);
4
'auto' : true,// 選擇文件後自動上傳
'fileSizeLimit' : '10MB',//上傳文件大小限制
'fileType' : ["jpg","png","jpeg"],//上傳文件類型限制
'width' : 150,//上傳按鈕寬度
'height' : 38,// 上傳按鈕高度
buttonText : "Upload File", //上傳按鈕文字
'dnd' : true, //允許拖放上
'formData' : {'PHPSESSID' : '<?php echo session_id(); ?>'},// 附帶form參數。常用的比如session等
'onUploadComplete':function(){}//上傳完成後執行的function
'removeCompleted':true // =true,上傳完後觸發onCancel,刪除上傳提示或錯誤提示。會調用自定義onCancel
見源碼
if (settings.removeCompleted) { setTimeout(function() { methods.cancel.call($this, file); }, 3000); }
5 'uploadScript': "/upload_file",// 服務器端處理路徑
6 'multi' : false //是否支持同時選擇多個文件
7 'simUploadLimit' : 0, // The maximum number of files to upload at once 一次上傳文件的最大數量
見源碼
// Check if the simUpload limit was reached if (($data.uploads.current >= settings.simUploadLimit && settings.simUploadLimit !== 0) || ($data.uploads.current >= settings.uploadLimit && settings.uploadLimit !== 0) || ($data.uploads.count >= settings.uploadLimit && settings.uploadLimit !== 0)) { return false; }
8 'queueSizeLimit' : 0, // The maximum number of files that can be in the queue
9 'truncateLength' : 0, // The length to truncate the file names to
10 'uploadLimit' : 0, // The maximum number of files you can upload 這是多次上傳file的最大文件數量限制。
uploadLimit 的設置會驗證uploads.count(注意,不是queue.count)
源碼
// Check if the upload limit was reached if (($data.uploads.count + $data.uploads.current) < settings.uploadLimit || settings.uploadLimit == 0) { if (!keepVars) { $data.uploads.attempted = 0; $data.uploads.successsful = 0; $data.uploads.errors = 0; var filesToUpload = $data.filesToUpload(); // Trigger the onUpload event if (typeof settings.onUpload === 'function') { settings.onUpload.call($this, filesToUpload); } }
11 'dropTarget' : false, // Selector for the drop target
特別技巧:
有些類型的文件用js獲取不到file.typ。比如crt證書類型的文件。依然會執行upload,在後台判斷後返回錯誤信息。這時,JS可以獲取到錯誤信息,如果想用uploadifive默認的錯誤提示方式來顯示錯誤信息應該怎麼做呢?
研究源碼後發現,錯誤信息的處理在error函數中。因此可以直接調用error函數,傳遞errory_type處理。參考demo
'onUploadComplete' : function(file, data) { var response = JSON.parse(data); // 錯誤處理 if (response.status == "error") { var error = response.info, error_type; if (error == "上传文件后缀不允许") { error_type = "FORBIDDEN_FILE_TYPE"; } var $data = $(this).data('uploadifive'); $data.error(error_type, file, true); return; } // 正確處理 $(".picture_wrap").find("img").attr("src", response.info + "?w=80&h=80"); $("#pictureInput").val(response.info); },
发表评论
-
使用BOOTSTRAP创建没有遮罩的可移动dialog
2017-01-16 12:00 1744bootstrap是个很流行的前端工具。我想做个没有遮罩的di ... -
富文本编辑器推荐
2016-10-26 16:03 2460website: https://www.froala.com ... -
一些比较特别的js库和框架
2016-08-11 14:05 642http://www.meedee.cn/2016/06/07 ... -
Javascript的变量与delete操作符
2016-08-11 14:02 468来自:http://www.meedee.cn/2 ... -
json schema validate
2014-09-17 16:58 4699为了检测API返回的数据结构是否正确,刚好chrome的插件p ... -
来自yahoo的web优化规则(YSLOW的23条军规)
2014-09-11 17:53 1706https://developer.yahoo.com/per ... -
<a>的href中添加js函数的写法
2014-03-18 15:54 1271参考资料: http://www.cnblogs.com/op ... -
使用backbonejs的router功能
2014-01-02 12:13 974来源: http://css.dzone.com/articl ... -
初次seajs使用
2013-11-22 14:11 3003第一次用报了$=null的错 ... -
Javascript:history.go()和history.back()的用法和区别
2013-08-02 14:38 37655Javascript:history.go()和history ... -
JAVASCRIPT常用函数集合
2013-07-23 15:01 9691、删除数组某项 // Array Remove - By ... -
JS判断一个数组中是否有重复值的三种方法
2013-07-18 09:52 2257参考 http://superivan.iteye.com/b ... -
多DOM操作的性能优化
2013-07-15 17:32 1012今天发现DOM操作很多,且是显示隐藏操作,性能是非常差的。一个 ... -
SafariJSRef safary开发指南
2013-07-10 11:30 941针对safari的js和css开发指南。 https://de ... -
js获取屏幕可视区域
2013-06-04 11:10 1032IE: document.body.offsetWidth, ... -
backbone 的delegateEvent用法
2013-05-24 10:37 4660這篇文章記錄關於 Backbone delegateEvent ... -
post的数据参数内容包含&如何如何处理
2013-01-17 23:37 2600这星期测试人员提交了一个bug,表单保存的数据不完整。查了一下 ... -
javascript 同zindex的重叠div如何处理事件关系
2012-11-15 11:43 6531在一个页面中有3个独立的div,不存在嵌套层次关系。3个div ... -
jquery easyui 操作总结
2012-10-29 12:32 289001、dialog $("#dialog-form& ... -
javascript浮点运算偏差的成因及解决方法
2012-10-25 10:26 2530原文地址:http://eatpockyboy.blog.16 ...
相关推荐
Uploadifive是一款强大的基于HTML5的上传插件,它的出现主要解决了传统上传方式对Flash的依赖,使得在不支持Flash的设备,特别是移动设备上也能实现便捷的文件上传功能。这款插件以其轻量级、易用性和高度可定制性受...
Uploadifive是一款强大的jQuery插件,专为实现高效、便捷的文件和图片上传功能而设计。这个v1.2.2的中文版尤其适合需要在网页上集成上传功能的项目,无论是在B2C电子商务网站、社交媒体平台还是企业内部管理系统,都...
Uploadifive是基于html5技术的文件上传jQuery插件,也是移动站点常用的文件上传插件之一。 提供的功能包括: 1,能够一次性选择多个文件上传,查看上传进度,控制文件上传类型和大小,为每一步操作添加回调函数等...
uploadifive是一款强大的JavaScript上传插件,它支持HTML5和移动设备,为用户提供了一种简单、易用且功能丰富的文件上传解决方案。这个插件的主要特点在于它的灵活性和自定义性,使得开发者能够轻松地集成到自己的...
Uploadifive是一款流行的JavaScript上传插件,主要用于网页中的文件上传功能。它支持多文件选择、自动上传、进度条显示等功能,极大地提升了用户在网页端上传文件的体验。这款插件适用于那些需要用户交互式上传文件...
5. **响应处理**:在文件上传成功后,服务器需要返回一个JSON格式的响应,告诉Uploadifive上传是否成功以及可能的错误信息。例如,如果上传成功,返回`{'success': true}`;如果失败,返回`{'success': false, 'msg'...
**jQuery Uploadifive 插件详解** Uploadifive是一款基于HTML5技术的异步上传插件,...总之,Uploadifive是一款功能强大、易于使用的jQuery上传插件,它极大地简化了HTML5环境下文件上传的实现,是开发者的得力工具。
Uploadifive是基于html5技术的文件上传jQuery插件,也是移动站点常用的文件上传插件之一。提供的功能包括:能够一次性选择多个文件上传,查看上传进度,控制文件上传类型和大小,为每一步操作添加回调函数等。该插件...
根据uploadifive-v1.2.2修改: 1. 鼠标悬停在按钮上时,由指针变成手 2. onQueueCompelete,队列全部上传完毕后未出发该事件,现修复 3. clearQueue及取消某个文件上传时,由原来的即刻消失,变为等待3秒再消失
【标题】"uploadify H5版(uploadifive)基于html5的手机上传图片插件"涉及的关键技术点包括HTML5、Uploadify、uploadifive和.NET后端处理。Uploadify是一个JavaScript上传组件,而其H5版本uploadifive则是针对现代...
UploadiFive是一款来自国外的、优秀的jQuery插件,主要功能是上传文件,支持文件的批量上传、拖拽上传等,是一个易集成的多文件上传解决方案。 其前身Uploadify在很多项目中已被广泛之用,但是Uploadify需要Flash的...
Uploadifive是一款基于jQuery的文件上传插件,其1.2.2标准版本在HTML5技术的支持下,提供了丰富的功能和优秀的用户体验。这个插件旨在解决网页上的文件批量上传问题,同时提供实时的上传进度反馈,使得用户可以清晰...
而jQuery uploadifive v1.2.2是这个插件的具体版本,它提供了一个简洁的界面和易于集成的API,允许用户在网页上实现拖放上传、批量上传以及实时的上传进度显示等功能。 在使用这个插件时,首先你需要确保你的帝国...
本文将详细介绍如何使用jQuery.uploadifive插件来解决上传限制图片或文件大小的问题。 首先,要使用jQuery.uploadifive插件,你需要在你的HTML文件中引入必要的JavaScript库。这包括jQuery本身和uploadifive的JS...
这个“uploadifive插件 完善好的插件的,可以使用,完整版的”描述意味着你已经得到了一个经过优化和测试的版本,可以直接在项目中使用。 在使用Uploadifive时,有几个关键知识点你需要了解: 1. **异步上传**:...
上述代码中的`handleFileUpload`方法会接收到uploadifive上传的文件,并将其转换为字节数组。你可以根据实际需求将这些字节保存到服务器的某个位置,或者进行其他处理。返回的字符串会被uploadifive捕获,作为文件...
优秀的上传文件插件uploadify的html版本uploadifive,Uploadify是一款基于JQuery的优秀的文件/图片上传的插件,有基于Flash和HTML5两种版本。 Uploadify/uploadifive主要特点有: 1. 多文件上传 2. 个性化...
UploadiFive是一款来自国外的、优秀的jQuery插件,主要功能是上传文件,支持文件的批量上传、拖拽上传等,是一个易集成的多文件上传解决方案。 其前身Uploadify在很多项目中已被广泛之用,但是Uploadify需要Flash的...