Skip to content

Commit

Permalink
release v1.0
Browse files Browse the repository at this point in the history
  • Loading branch information
administrator authored and administrator committed Apr 11, 2016
1 parent 7b8010b commit f0398e1
Show file tree
Hide file tree
Showing 9 changed files with 139 additions and 46 deletions.
7 changes: 7 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,13 @@ This file is a manually maintained list of changes for each release. Feel free
to add your changes here when sending pull requests. Also send corrections if
you spot any mistakes.

## 2016.4.11

* change isSingle option to 'single'
* add process percent / size / filename css
* add more demo
* release 1.0

## 1.0.2

* OMD: this version is written on omd 1.1.2, look at https://github.com/tangshuang/omd
Expand Down
26 changes: 21 additions & 5 deletions HHuploadify.css
100755 → 100644
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@
text-decoration: none;
margin-left:5px;
}
.uploadify-queue .uploadify-queue-item .up_filename,
.uploadify-queue .uploadify-queue-item .itemtitle {
position: absolute;
bottom: 4px;
Expand All @@ -101,6 +102,13 @@
border-radius: 10px;

}
.uploadify-queue .uploadify-queue-item .up_filename {
border: 0;
top: 8px;
background: none;
padding: 0;
text-align: left;
}
.uploadify-queue .uploadify-queue-item .uploadbtn{
position: absolute;
top: 5px;
Expand All @@ -113,6 +121,7 @@
position: absolute;
top: 5px;
right: 5px;
z-index: 99;
border: #0078CC solid 1px !important;
color: #0078CC;
width: 16px;
Expand All @@ -126,23 +135,30 @@
background: #0078CC;
}
/*进度条*/
.uploadify-queue .uploadify-queue-item .uploadify-progress{
.uploadify-queue .uploadify-queue-item .uploadify-progress {
display:inline-block;
position: absolute;
top: 50%;
left: 50%;
left: 0;
z-index: 5;
margin: -5px 0 0 -45px;
width:90px;
width: 100%;
height: 1em;
margin-top: -.5em;
text-align: center;
}
.uploadify-queue .uploadify-queue-item .uploadify-progress-bar{
display:inline-block;
width:90%;
height:10px;
margin-top: 2px;
background-color:white;
border-radius:5px;
border:1px solid #0078CC;
vertical-align:middle;
padding:0;
text-align: left;
}
.uploadify-queue .uploadify-queue-item .uploadify-progress-bar{
.uploadify-queue .uploadify-queue-item .uploadify-progress-bar-inner{
display:inline-block;
float: left;
width:0;
Expand Down
82 changes: 49 additions & 33 deletions HHuploadify.js
100755 → 100644
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,25 +26,33 @@
}
}(['jquery'],function(){
$.fn.HHuploadify = function(opts){
var itemTemp = '<span id="${fileID}" class="uploadify-queue-item"><span class="uploadify-queue-item-container"><span class="uploadify-progress"><span class="uploadify-progress-bar"></span></span><span class="up_filename">${fileName}</span><a href="javascript:void(0);" class="uploadbtn">上传</a><a href="javascript:void(0);" class="delfilebtn">&times;</a></span></span>';

var defaults = {
fileTypeExts:'*.jpg;*.jpeg;*.png;*.gif',//file can be uploaded exts like: '*.jpg;*.doc'
uploader:'',//upload to server url
method:'post',//http request type: get/post
formData:null,//append data like: {key1:value1,key2:value2}
fileObjName:'file',//upload form file name field, php $_FILES['file']
multi:true,//choose multi pictures
isSingle:false,// force to upload only one item
uploader:'',//upload to server url
method:'post',//http request type: get/post
formData:null,//append data like: {key1:value1,key2:value2}
fileObjName:'file',//upload form file name field, php $_FILES['file']

fileTypeExts:'*.jpg;*.jpeg;*.png;*.gif;*.JPG;*.PNG;*.GIF;*.JPEG',//file can be uploaded exts like: '*.jpg;*.doc'
fileSizeLimit:2048,//max upload file size: KB

multi:true,//choose multi pictures 选择图片的时候可以一次性选择多张图片上传，为false时只能选一张
single:false,// force to upload only one item 强制只上传一张图片,这时multi会被强制设置为false
auto:true,//auto upload
fileSizeLimit:2048,//max upload file size: KB
showPreview:1,//preview picture, 0: close; 1: only preview local origin picture; 2: preview picture on server by result 'url' fields after complate uploading
showUploadedFilename:false,
showUploadedPercent:false,
showUploadedSize:false,
buttonText:'choose',//words on upload button
itemTitle:false,//words in item area, you should use when isSingle=true

buttonText:'choose',//words on upload button
itemTitle:false,//words in item area, you should use when single=true 是否先单个上传框中显示标题,如果为false则表示不显示,否则将显示设置当值

itemTemplate:'<span id="${fileID}" class="uploadify-queue-item"><span class="uploadify-queue-item-container"><span class="uploadify-progress"></span><a href="javascript:void(0);" class="uploadbtn">上传</a><a href="javascript:void(0);" class="delfilebtn">&times;</a></span></span>',

showPreview:1,//preview picture, 0: close; 1: only preview local origin picture; 2: preview picture on server by result 'url' fields after complate uploading 是否选择好图片后进行预览,0不预览,1只预览本地图片,2先预览本地图片,上传完成后预览服务器上的图片,需要设置showPreviewField
showPreviewField:'url', // 当showPreview=2时,图片上传完成以后,服务器返回当图片地址保存在返回当json的哪一个字段中,这也就是说,图片上传返回数据必须是json
showUploadedBar:true, // 是否显示正在上传进度条
showUploadedFilename:false, // 是否显示正在上传文件名
showUploadedPercent:false, // 是否显示已上传百分比
showUploadedSize:false, // 是否显示已上传大小
removeTimeout: 500,//process bar fadeout time
itemTemplate:itemTemp,

onInit:null,//when plugin is ready
onSelect:null,//when select a file
onUploadStart:null,//when a picture upload start
Expand All @@ -59,8 +67,8 @@

var option = $.extend(defaults,opts);

// force to choose only one picture
if(option.isSingle) {
// force to choose only one picture 只能上传一张图片时,强制只能选择一张图片
if(option.single) {
option.multi = false;
}

Expand Down Expand Up @@ -198,7 +206,7 @@
uploadManager._getFiles(e);
// 如果是单个文件上传，那么要隐藏上传按钮
var fileCount = _this.find('.uploadify-queue .uploadify-queue-item').length; // 注意这个一行，如果选择的文件有问题，弹出提示信息，如果没有这一行的话，上传按钮就会消失
if(option.isSingle && fileCount > 0) {
if(option.single && fileCount > 0) {
_this.find('.uploadify-button').hide();
}
});
Expand Down Expand Up @@ -241,7 +249,7 @@
},
//根据选择的文件，渲染DOM节点
_renderFile : function(file){
var $html = $(option.itemTemplate.replace(/\${fileID}/g,'fileupload_'+instanceNumber+'_'+file.index).replace(/\${fileName}/g,file.name).replace(/\${fileSize}/g,F.formatFileSize(file.size)).replace(/\${instanceID}/g,_this.attr('id')));
var $html = $(option.itemTemplate.replace(/\${fileID}/g,'fileupload_'+instanceNumber+'_'+file.index).replace(/\${instanceID}/g,_this.attr('id')));

// 预览本地图片
if(option.showPreview > 0) {
Expand Down Expand Up @@ -271,24 +279,30 @@
if(option.itemTitle != false) {
var title = '<span class="itemtitle">' + option.itemTitle + '</span>';
$html.prepend(title);
}

//判断是否显示上传进度条
if(option.showUploadedBar) {
var $bar = '<span class="uploadify-progress-bar"><span class="uploadify-progress-bar-inner"></span></span>';
$html.find('.uploadify-progress').append($bar);
}

//判断是否显示已上传文件大小
if(option.showUploadedSize){
var num = '<span class="progressnum"><span class="uploadedsize">0KB</span>/<span class="totalsize">${fileSize}</span></span>'.replace(/\${fileSize}/g,F.formatFileSize(file.size));
$html.find('.uploadify-progress').after(num);
var $num = '<span class="progressnum"><span class="uploadedsize">0KB</span>/<span class="totalsize">${fileSize}</span></span>'.replace(/\${fileSize}/g,F.formatFileSize(file.size));
$html.find('.uploadify-progress').append($num);
}

// 是否在上传时隐藏文件名
if(!option.showUploadedFilename) {
$html.find('.up_filename').remove();
if(option.showUploadedFilename) {
var $filename = '<span class="up_filename">${fileName}</span>'.replace(/\${fileName}/g,file.name);
$html.prepend($filename);
}

//判断是否显示上传百分比
if(option.showUploadedPercent){
var percentText = '<span class="up_percent">0%</span>';
$html.find('.uploadify-progress').after(percentText);
var $percentText = '<span class="up_percent">0%</span>';
$html.find('.uploadify-progress').append($percentText);
}

// 添加DOM
Expand Down Expand Up @@ -339,7 +353,7 @@
if (f.index == file.index) {
uploadManager.filteredFiles.splice(i,1);
_this.find('#fileupload_'+instanceNumber+'_'+file.index).fadeOut(function(){
if(option.isSingle) {
if(option.single) {
_this.find('.uploadify-button').show();
}
$(this).remove();
Expand All @@ -352,7 +366,7 @@
//校正上传完成后的进度条误差
_regulateView : function(file){
var thisfile = _this.find('#fileupload_'+instanceNumber+'_'+file.index);
thisfile.find('.uploadify-progress-bar').css('width','100%');
thisfile.find('.uploadify-progress-bar-inner').css('width','100%');
option.showUploadedSize && thisfile.find('.uploadedsize').text(thisfile.find('.totalsize').text());
option.showUploadedPercent && thisfile.find('.up_percent').text('100%');
},
Expand All @@ -366,7 +380,9 @@
if(option.showUploadedPercent){
eleProgress.nextAll('.up_percent').text(percent);
}
eleProgress.children('.uploadify-progress-bar').css('width',percent);
if(option.showUploadedBar) {
eleProgress.children('.uploadify-progress-bar-inner').css('width',percent);
}
},
_allFilesUploaded : function(){
var queueData = {
Expand Down Expand Up @@ -417,9 +433,9 @@
// 上传成功后，把上传结果图片显示在区域内
_this.find('#fileupload_'+instanceNumber+'_'+file.index).removeClass('uploading').addClass('uploaded');
if(option.showPreview > 1) {
var data = JSON.parse(xhr.responseText); // 解析为json，注意responseText是文本
if(data.url != undefined) {
_this.find('#fileupload_'+instanceNumber+'_'+file.index).css({'background-image' : 'url(' + data.url + ')'});
var data = $.parseJSON(xhr.responseText); // 解析为json，注意responseText是文本
if(data && data[option.showPreviewField] != undefined) {
_this.find('#fileupload_'+instanceNumber+'_'+file.index).css({'background-image' : 'url(' + data[option.showPreviewField] + ')'});
}
}
}
Expand Down Expand Up @@ -449,7 +465,7 @@
var fd = new FormData();
fd.append(option.fileObjName,file);
if(option.formData){
for(key in option.formData){
for(var key in option.formData){
fd.append(key,option.formData[key]);
}
}
Expand Down
6 changes: 3 additions & 3 deletions HHuploadifyReady.js
100755 → 100644
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,13 @@
isSingle = typeof isSingle == 'boolean' ? isSingle : false;
$(selector).HHuploadify({
auto: true,
fileTypeExts: '*.jpg;*.png;*.jpeg;*.gif',
fileTypeExts: '*.jpg;*.png;*.jpeg;*.gif;*.JPG;*.PNG;*.GIF;*.JPEG',
multi: true,
buttonText: title ? '选择' + title : '选择图片',
itemTitle: title || false,
fileSizeLimit: 99999999,
uploader: uploader,
isSingle: isSingle,
single: isSingle,
showPreview: 2,
onSelect : function() {
var instanceNumber = $(selector).find('.uploadify').index('.uploadify') + 1;
Expand Down Expand Up @@ -122,7 +122,7 @@
}

function resetHHuploadifyOne(selector,image,field,title) {
if(image.id == undefined || !image.id || image.id == '' || image.id == '0')
if(!image || image.id == undefined || !image.id || image.id == '' || image.id == '0')
return;

var instanceNumber = $(selector).find('.uploadify').index('.uploadify') + 1,
Expand Down
6 changes: 3 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ print only one upload item, can only select one picture
<script>
$('#upload').HHuploadify({
uploader: 'upload.php',
isSingle: true
single: true
});
</script>
```
Expand All @@ -76,7 +76,7 @@ show notice words on the side of every item, like the screenshot show
<script>
$('#upload').HHuploadify({
uploader: 'upload.php',
isSingle: true,
single: true,
itemTitle: 'Thumbnail'
});
</script>
Expand All @@ -102,7 +102,7 @@ for(i = 0;i < itemTitles.length;i ++) {
$('#' + id).HHuploadify({
uploader: 'upload.php',
isSingle: true,
single: true,
itemTitle: title
});
}
Expand Down
Binary file added demo/.DS_Store
View file
Binary file not shown.
42 changes: 40 additions & 2 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,18 +45,56 @@ <h4>多选上传</h4>
}
});
</script>

<br style="clear: both">

<h4>单个上传</h4>
<div id="upload2"></div>
<script>
$('#upload2').HHuploadify({
auto:true,
fileTypeExts:'*.jpg;*.png;*.gift',
isSingle : true,
fileTypeExts:'*.jpg;*.png;*.gif',
single : true,
showPreview: true,
fileSizeLimit:1024,
uploader:'upload.php'
});
</script>


<br style="clear: both">

<h4>百分数进度</h4>
<div id="upload3"></div>
<script>
$('#upload3').HHuploadify({
auto:true,
showUploadedBar: false, // 默认情况下，会显示进度条，如果想只显示百分比，则应该关掉
showUploadedPercent: true,
fileTypeExts:'*.jpg;*.png;*.gif',
showPreview: true,
fileSizeLimit:1024,
uploader:'upload.php'
});
</script>

<br style="clear: both">

<h4>上传显示文件名和已经上传的大小</h4>
<div id="upload4"></div>
<script>
$('#upload4').HHuploadify({
auto:true,
showUploadedBar: false,
showUploadedFilename: true,
showUploadedSize: true,
fileTypeExts:'*.jpg;*.png;*.gif',
showPreview: true,
fileSizeLimit:1024,
uploader:'upload.php'
});
</script>


</body>
</html>
2 changes: 2 additions & 0 deletions demo/ready.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@

<h4>multiple</h4>
<div id="upload"></div>
<p style="clear:both;">drag after uploaded</p>
<script>
$.HHuploadify.init('#upload','upload.php','image');
</script>
Expand All @@ -33,5 +34,6 @@ <h4>several</h4>
$.HHuploadify.initCount('#upload3','upload.php',['image1','image2','image3'],['thumbnail1','','thumbnail3']);
</script>


</body>
</html>
14 changes: 14 additions & 0 deletions demo/upload.php
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,19 @@
<?php

// --------------------------- for demo ---------------------------

/*
sleep(10);
$arr = array(
'id' => 5,
'url' => '../src/screenshot.png'
);
echo json_encode($arr);
exit;
*/

// ---------------------------- your uploader ----------------------------

$filename = $_FILES['file']['name'];
$filetmp = $_FILES["file"]["tmp_name"];

Expand Down

0 comments on commit f0398e1

Please sign in to comment.