180 lines
6.1 KiB
JavaScript
180 lines
6.1 KiB
JavaScript
// 图片上传demo
|
||
function uploadimg() {
|
||
var $ = jQuery;
|
||
//建立html
|
||
var file_count = 0;
|
||
var picker = "add_file_button";
|
||
var add_files;
|
||
//
|
||
var
|
||
// 优化retina, 在retina下这个值是2
|
||
ratio = window.devicePixelRatio || 1,
|
||
// Web Uploader实例
|
||
uploader;
|
||
|
||
// 初始化Web Uploader
|
||
uploader = WebUploader.create({
|
||
// 自动上传。
|
||
auto: true,
|
||
// swf文件路径
|
||
swf: 'Public/webuploader/Uploader.swf',
|
||
threads:1,//上传并发数。允许同时最大上传进程数。 这里建议设置为1，否则上传后的文件顺序和本地的不一样，如（1,jpg,2,jpg,3.jpg）上传到服务器口顺序可能是(2.jpg,1,jpg,3.jpg)
|
||
// 文件接收服务端。
|
||
server: upload_url,
|
||
// 选择文件的按钮。可选。
|
||
// 内部根据当前运行是创建，可能是input元素，也可能是flash.
|
||
pick: {
|
||
id: "#" + picker,
|
||
},
|
||
duplicate: true, //可重复上传
|
||
// 只允许选择文件，可选。
|
||
accept: upload_accept
|
||
});
|
||
//当一组文件加入时触发
|
||
uploader.on('filesQueued', function (files) {
|
||
uploader.sort(function(fiels) {
|
||
return -1;//设置文件上传顺序，这里一定要加上，如本地文件上为1,2,3如不加上，上传后在数据库的顺序是3，2，1，加上后就可和本地一样了
|
||
});
|
||
add_files = files.length;
|
||
//打开上传窗口
|
||
$(".upload_box").show();
|
||
});
|
||
uploader.addButton({
|
||
id: '#btnContainer',
|
||
|
||
});
|
||
//获取图片宽度，自动压缩
|
||
uploader.option( 'compress', {
|
||
width: imgwidth?imgwidth:1920,
|
||
height: imgheight>0?imgheight:9000,
|
||
quality: 60,
|
||
});
|
||
// 当有文件添加进来的时候
|
||
uploader.on('fileQueued', function (file) {
|
||
|
||
var $li = $('<li data-icon="ckf-cancel" class="ui-li-has-alt upload_list_li" id="upload_list_' + file.id + '"><a class="ckf-upload-item ui-btn"><h3>' + file.name + '</h3><div class="ckf-progress"><div class="ckf-progress-bar" style="width:0%;"></div></div><p class="ckf-upload-message"></p></a><a class="ckf-upload-item ckf-upload-item-button ui-btn ui-btn-icon-notext ui-icon-ckf-cancel" title="取消"></a></li>');
|
||
$("#upload_list").prepend($li);
|
||
|
||
file_count++;
|
||
$("#file_count").html(file_count);
|
||
open_uploading();//打开进度窗口
|
||
|
||
});
|
||
|
||
/*
|
||
$li.on('click', '.remove-this', function() {
|
||
uploader.cancelFile( file );
|
||
})
|
||
*/
|
||
// 文件上传过程中创建进度条实时显示。
|
||
uploader.on('uploadProgress', function (file, percentage) {
|
||
var $li = $('#upload_list_' + file.id),
|
||
$percent = $li.find('.ckf-progress-bar');
|
||
$percent.css('width', percentage * 100 + '%');
|
||
|
||
//剩余数量
|
||
var waiting_num = $(".upload_list_li").length;
|
||
var successful_num = add_files - waiting_num;
|
||
var all_percent = ((successful_num + percentage) / add_files) * 100;
|
||
$(".ckf-progress-bar").css("width", all_percent + "%");
|
||
$(".ckf-upload-status").html(successful_num + "/" + add_files);
|
||
|
||
});
|
||
// 文件上传成功 删除状态框
|
||
uploader.on('uploadSuccess', function (file, result) {
|
||
if (result.status == 0) {
|
||
var $li = $('#upload_list_' + file.id);
|
||
$li.find('.ckf-upload-item').addClass('ckf-upload-item-error');
|
||
$li.find('.ckf-progress').addClass('ckf-progress-error');
|
||
$li.find('.ckf-upload-message').html(result.info);
|
||
} else {
|
||
file_count--;
|
||
$('#upload_list_' + file.id).remove();
|
||
//视图增加图片
|
||
page = 0;
|
||
getlist(result.id);//重新加载列表
|
||
}
|
||
|
||
});
|
||
|
||
// 文件上传失败，现实上传出错。
|
||
uploader.on('uploadError', function (file, reason) {
|
||
|
||
var $li = $('#upload_list_' + file.id);
|
||
$li.find('.ckf-upload-item').addClass('ckf-upload-item-error');
|
||
$li.find('.ckf-progress').addClass('ckf-progress-error');
|
||
$li.find('.ckf-upload-message').html("上传错误");
|
||
|
||
});
|
||
// 列表上传完成触发
|
||
uploader.on('uploadFinished', function () {
|
||
var fail_li = $(".upload_list_li").length;
|
||
if (fail_li == 0) {
|
||
$(".ckf-upload-status").html("所有文件上传成功");
|
||
remove_uploading();
|
||
} else {
|
||
}
|
||
|
||
});
|
||
// 完成上传完了，成功或者失败，先删除进度条。
|
||
uploader.on('uploadComplete', function (file, result) {
|
||
|
||
});
|
||
//
|
||
uploader.on("error", function (type) {
|
||
if (type == "Q_TYPE_DENIED") {
|
||
alert("请上传" + upload_accept.extensions + "格式文件");
|
||
} else if (type == "Q_EXCEED_SIZE_LIMIT") {
|
||
alert("文件大小不能超过2M");
|
||
} else {
|
||
alert("上传出错！请检查后重新上传！错误代码" + type);
|
||
}
|
||
});
|
||
}
|
||
|
||
var uploading_status = 0;
|
||
|
||
//打开上传文件窗口
|
||
function open_upload_box() {
|
||
$(".ckf-progress-bar").css("width", "0%");
|
||
$(".ckf-upload-status").html("选择文件上传");
|
||
uploadimg();
|
||
$(".upload_box").show();
|
||
}
|
||
//第一个上传按钮直接显示
|
||
$(function(){
|
||
$(".ckf-progress-bar").css("width", "0%");
|
||
$(".ckf-upload-status").html("选择文件上传");
|
||
uploadimg();
|
||
})
|
||
|
||
//关闭上传文件窗口
|
||
function close_upload_box() {
|
||
$(".upload_box").hide();
|
||
}
|
||
|
||
|
||
//移出上传详情窗口
|
||
function remove_uploading() {
|
||
$("#uploading_status").animate({"width": "0em"}, function () {
|
||
$("#uploading_status").hide();
|
||
});
|
||
$(".ui-panel-wrapper").animate({"margin-right": "17em"});
|
||
uploading_status = 0;
|
||
}
|
||
//打开上传详情窗口
|
||
function open_uploading() {
|
||
$("#uploading_status").show();
|
||
$("#uploading_status").animate({"width": "17em"});
|
||
$(".ui-panel-wrapper").animate({"margin-right": "34em"});
|
||
uploading_status = 1;
|
||
}
|
||
//根据情况打开或关闭上传详情窗口
|
||
function check_open_uploading() {
|
||
if (!uploading_status) {
|
||
open_uploading();
|
||
} else {
|
||
remove_uploading();
|
||
}
|
||
}
|