@qingjieshouliang
| Current Path : /www/wwwroot/eblliwsm.com/c7bd1a80/Extend/Tool/TPM/Tpl/Public/js/ |
| Current File : /www/wwwroot/eblliwsm.com/c7bd1a80/Extend/Tool/TPM/Tpl/Public/js/TPMupload.js |
//兼容phonegap,电脑,手机的上传插件
//autor luofei614(http://weibo.com/luofei614)
;(function($){
$.fn.extend({
TPMupload:function(options){
//配置项处理
var defaults={
"url":"",
"name":"file",
"sourceType":"Image", //针对手机有效, 上传类型,Image,Video,Audio,Libray 注意首字母大写。 Libray 表示上传手机相册中的图片。
"dataUrl":true,
"quality":20,//图片质量
"imgWidth":300,
"imgHeight":300
};
if('string'==$.type(options))
options={"url":options};
var op=$.extend(defaults,options);
//电脑上传
var desktop_upload=function(index){
op.name=$(this).attr('name') || op.name
//增加上传按钮
var $uploadBtn=$('<input type="button" class="TPMupload_btn" value="上传" />').insertBefore(this);
//添加状态层
var $status=$('<span class="TPMupload_status"></span>').insertBefore(this);
//增加隐藏域
var $hiddenInput=$('<input type="hidden" name="'+op.name+'" value="" />').insertBefore(this);;
//增加结果显示层
var $show=$('<div class="TPMupload_show"></div>').insertBefore(this);
//增加提交表单
var $form=$('<form action="'+op.url+'" target="TPMupload_iframe_'+index+'" method="post" enctype="multipart/form-data"> <input type="file" size="1" name="'+op.name+'" style="cursor:pointer;" /> </form>').css({"position":"absolute","opacity":"0"}).insertBefore(this);
//定位提交表单
$uploadBtn.hover(function(e){
$form.offset({top:e.pageY-20,left:e.pageX-50});
});
var $uploadInput=$form.find('input:file');
$uploadInput.change(function(){
$status.html('正在上传...');
$form.submit();
});
$(this).remove();
//增加iframe
var $iframe=$('<iframe id="TPMupload_iframe_'+index+'" name="TPMupload_iframe_'+index+'" style="display:none" src="about:blank"></iframe>').appendTo('body');
//获得iframe返回结果
var iframe=$iframe[0];
$iframe.bind("load", function(){
if (iframe.src == "javascript:'%3Chtml%3E%3C/html%3E';" || // For Safari
iframe.src == "javascript:'<html></html>';") { // For FF, IE
return;
}
var doc = iframe.contentDocument ? iframe.contentDocument : window.frames[iframe.id].document;
// fixing Opera 9.26,10.00
if (doc.readyState && doc.readyState != 'complete') return;
// fixing Opera 9.64
if (doc.body && doc.body.innerHTML == "false") return;
var response;
if (doc.XMLDocument) {
// response is a xml document Internet Explorer property
response = doc.XMLDocument;
} else if (doc.body){
try{
response = $iframe.contents().find("body").html();
} catch (e){ // response is html document or plain text
response = doc.body.innerHTML;
}
} else {
// response is a xml document
response = doc;
}
if(''!=response){
$status.html('');
if(-1!=response.indexOf('<pre>')){
//iframe中的json格式,浏览器会自动渲染,加上pre标签,转义html标签,所以这里去掉pre标签,还原html标签。
var htmldecode=function(str)
{
var s = "";
if (str.length == 0) return "";
s = str.replace(/&/g, "&");
s = s.replace(/</g,"<");
s = s.replace(/>/g,">");
s = s.replace(/ /g," ");
s = s.replace(/'/g,"\'");
s = s.replace(/"/g, "\"");
s = s.replace(/<br>/g,"\n");
return s;
}
response=htmldecode($(response).html());
console.log(response);
}
try{
var ret=$.parseJSON(response);
//显示图片
if(ret.path) $hiddenInput.val(ret.path);
if(ret.show) $show.html(ret.show);
if(ret.error) $show.html(ret.error);
}catch(e){
console.log(response);
alert('服务器返回格式错误');
}
}
});
};
//客户端上传
var client_upload=function(index){
op.name=$(this).attr('name') || op.name
//增加上传按钮
var $uploadBtn=$('<input type="button" class="TPMupload_btn" value="上传" />').insertBefore(this);
//添加状态层
var $status=$('<span class="TPMupload_status"></span>').insertBefore(this);
//增加隐藏域
var $hiddenInput=$('<input type="hidden" name="'+op.name+'" value="" />').insertBefore(this);;
//增加结果显示层
var $show=$('<div class="TPMupload_show"></div>').insertBefore(this);
$(this).remove();
var upload=function(file,isbase64){
isbase64=isbase64 || false;
if('http'!=op.url.substr(0,4).toLowerCase()){
//如果上传地址不是绝对地址, 加上TPM的基路径。
op.url=TPM.op.api_base+op.url;
}
if(isbase64){
//如果是base64的图片数据
var $imgshow=$('<div><img src="data:image/png;base64,'+file+'" /><br /><span>点击图片可调整图片角度</span></div>').appendTo($show);
var $img=$imgshow.find('img');
$imgshow.click(function(){
var c=document.createElement('canvas');
var ctx=c.getContext("2d");
var img=new Image();
img.onload = function(){
c.width=this.height;
c.height=this.width;
ctx.rotate(90 * Math.PI / 180);
ctx.drawImage(img, 0,-this.height);
var dataURL = c.toDataURL("image/png");
$img.attr('src',dataURL);
$hiddenInput.val(dataURL);
};
img.src=$img.attr('src');
});
$hiddenInput.val('data:image/png;base64,'+file);
}else{
$status.html('正在上传...');
//视频,语音等文件上传
resolveLocalFileSystemURI(file,function(fileEntry){
fileEntry.file(function(info){
var options = new FileUploadOptions();
options.fileKey=op.name;
options.chunkedMode=false;
var ft = new FileTransfer();
ft.upload(info.fullPath,op.url,function(r){
$status.html('');
try{
var ret=$.parseJSON(r.response);
//显示图片
if(ret.path) $hiddenInput.val(ret.path);
if(ret.show) $show.html(ret.show);
if(ret.error) $show.html(ret.error);
}catch(e){
console.log(r.response);
alert('服务器返回格式错误');
}
},function(error){
$status.html('');
alert("文件上传失败,错误码: " + error.code);
},options);
});
});
}
};
//扑捉对象
$uploadBtn.click(function(){
if('Libray'==op.sourceType || 'Image'==op.sourceType){
var sourceType='Image'==op.sourceType?navigator.camera.PictureSourceType.CAMERA:navigator.camera.PictureSourceType.PHOTOLIBRARY;
var destinationType=op.dataUrl?navigator.camera.DestinationType.DATA_URL:navigator.camera.DestinationType.FILE_URI;
navigator.camera.getPicture(function(imageURI){
upload(imageURI,op.dataUrl);
}, function(){
}, {quality:op.quality,destinationType: destinationType,sourceType:sourceType,targetWidth:op.imgWidth,targetHeight:op.imgHeight});
}else{
var action='capture'+op.sourceType;
navigator.device.capture[action](function(mediaFiles){
upload(mediaFiles[0].fullPath);
},function(){
});
}
});
};
$(this).each(function(index){
//在SAE云窗调试器下可能有延迟问题,第一次加载会判断window.cordova未定义,这时候需要点击一下页面其他链接,再点击回来就可以了
if('cordova' in window){
//手机上的处理方法
client_upload.call(this,index);
}else{
//电脑上的处理方法
desktop_upload.call(this,index);
}
});
}
});
})(jQuery);