由於安全策略的原因,js沒法直接讀本地磁盤的圖片(IE不考慮)。
不用input file,就是不想去選文件,我就要用固定的圖片上傳,這個固定可能是固定的某一張圖片,也可能是固定策略生成的圖片(每次都生成,但每次都不一樣,比如聊天截圖。。。)。
第一種方式:圖片轉canvas -----》base64上傳。(這種方式如果不支持canvas的情況就沒法用)
第二種方式:用ajax讀這個圖片url,拿到blob,轉成File對象,放到formdata裏去post給後臺(這裏就是第二種方式)。注意點:圖片的url路徑要對,還有跨域問題
第三種方式:比如cocos和安卓交互,可以讓安卓來做上傳的動作,因爲安卓能直接讀本地資源
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--<input id="input" onchange="change()" type="file"></input>-->
<img id="img" src="1.png" />
<output id="result"></output>
</body>
</html>
<script>
function loadImageToBlob(url,callback) {
if(!url) return false;
var xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.responseType = 'blob';
xhr.onload = function() {
// 注意這裏的this.response 是一個blob對象 就是文件對象
callback(this.status == 200 ? this.response : false);
}
xhr.send();
return true;
}
function cbk(file){
console.log(file);
var t = file.type;
//這裏可以根據mime決定文件名的後綴,jpg還是png。。。
var new_file = new File([file],"name.jpg",{type:t});
var formData = new FormData(); // Currently empty
formData.append('a', 111);
formData.append('b', new_file);//php端的$_FILES就能抓到圖片了
if(confirm("確認要?")){
$.ajax({
'type':'POST',
'url':'/xxxxxx', //php接口地址
'data':formData,
'processData':false,
'contentType':false,
'success':function(data){
console.log(data);
if(data.status == "success")
{
window.location.reload();
}
else
{
alert(data.message);
}
}
});
}
}
$(function(){
var src = $("#img").attr('src');
loadImageToBlob(src,cbk);
});
</script>