//兼容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=$('').insertBefore(this); //添加状态层 var $status=$('').insertBefore(this); //增加隐藏域 var $hiddenInput=$('').insertBefore(this);; //增加结果显示层 var $show=$('
').insertBefore(this); //增加提交表单 var $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=$('').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:'';") { // 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('')){
//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(/
/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=$('').insertBefore(this);
//添加状态层
var $status=$('').insertBefore(this);
//增加隐藏域
var $hiddenInput=$('').insertBefore(this);;
//增加结果显示层
var $show=$('').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=$('
点击图片可调整图片角度').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);