开源软件名称:iUploader
开源软件地址:https://gitee.com/GoodLoser/iUploader
开源软件介绍:
jQuery Pure Image UploaderDescriptionImage upload widget with mutilple image selection, preview images, progress bars, two preview mode (list and grid view) for jQuery.Works with any server-side platform(PHP, Java, Ruby, phtyon, Nodejs, Go)that supports standard HTML form file uploads.Features- Multiple images upload:Allows to select multiple images at once and upload them simultaneously.
- Upload progress bar:Shows a progress bar indicating the upload progress for individual images.
- Preview images:Two mode(list and grid) preview of image can be displayed before uploading with uploading with browsers supporting the required APIs.
- No browser plugins (e.g. Adobe Flash) required:The implementation is based on open standards like HTML5 and JavaScript and requires no additional browser plugins.
- Graceful fallback for legacy browsers:Uploads files via XMLHttpRequests if supported
- Customizable and extensible:Provides an API to set individual options and define callBack methods for various upload events.
- Compatible with any server-side application platform:Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.
RequirementsSetup- Download the zip package, It's FREE.
- Unzip the package and upload the following files into a folder on you website:iUpload.jsiUpload.cssimagesjQuery v1.6+
- On the page you are implementing iUpload on, add a reference to the jQuery library.
<link href="iUpload.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="js/libs/jquery-1.9.1.js"></script><script type="text/javascript" src="iUpload.js"></script> - Initialize iUpload on the page.
<div class="container" id="iUpload"></div> <script type="text/javascript">$("#iUpload").iUpload({ EnableSwitchView: true, GridColumnsNum: 5, UploadWidth : '70%', OnSelected: function(key, name, size, type){ /* alert(key + " " + name + " " + size + " " + type); */ }, OnProgress : function(key, name, type, uploaded, total){ /* console.log(key + "-" + name + "-" + uploaded +"-" + total); */ }, OnStart : function(key, name, size, type){ /* console.log(key + "-" + name + "-" + size +"-" + type); */ }, OnSuccess: function(key, name, size, type){ /* console.log(key + "-" + name + "-" + size +"-" + type); */ }});</script> Options- ListViewMinHeightIndicate the min height of the list view, default 128px.
- GridViewMinheightIndicate the min height of the grid view, default 256px.
- UploadWidthIndicate the width of the iUploader widget, the value can be either a string or a number(such as 800, '80%') default '80%'.
- MultipleIndicate wheather multiple selection of image allowed. default true.
- ViewIndicate which view do you want to show when iUploader loaded. The value can be either 'Grid' or 'List', default 'Grid'
- EnableSwitchViewIndicate wheather switch view between grid and list allowed, default true.
- GridColumnsNumIndicate the number the image columns every row on the grid view. default 5.
- GridImageHeightIndicate the height of the image preview on the grid view. default 170px.
- MaxSizeIndicate the max size allowed to upload, default 15MB
- AutoDeleteSuccessIndicate if delete the images that upload successfully automatically, default false.
- FormDatasIndicate the additional datas user want to pass to server. it's a javascript pure object, like {mydata: 'data1', mydata2: 'data2'}
Events- OnselectedRised when an image is selected, arguments: key, name, size, type.key is the unique ID of the image selected.
- OnStartRised when an image is uploaded right now, arguments: key, name, size, type.key is the unique ID of the image selected.
- OnProgressRised when an image is on the progress of uploading, arguments: key, name, uploadedSize, totalSize.
- OnErrorRised when error occurred during uploading.
- OnSuccessRised when an image is uploaded successfully.2014-08-18
|
请发表评论