不依賴input file標籤上傳圖片

由於安全策略的原因,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>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章