• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

iUploader: 图片上传工具, 并提供上传前预览,进度条等功能。 除jQuery不依赖任何插 ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

iUploader

开源软件地址:

https://gitee.com/GoodLoser/iUploader

开源软件介绍:

jQuery Pure Image Uploader

Description

Image 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.

Requirements

Setup

  • 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

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap