不依赖input file标签上传图片

最新推荐文章于 2023-11-15 11:54:26 发布

原创最新推荐文章于 2023-11-15 11:54:26 发布 · 5.1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#不依赖input file标签上传图片

js/jquery/css 专栏收录该内容

56 篇文章

订阅专栏

本文探讨了JavaScript中三种图片上传的方法，包括将图片转换为canvas再转base64上传，使用AJAX读取图片URL并转化为File对象上传，以及在特定环境下如Cocos与安卓交互时由安卓端直接进行上传操作。每种方法都有其适用场景和限制。

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