不依赖input file标签上传图片

最新推荐文章于 2024-04-13 15:23:23 发布

lein_wang

最新推荐文章于 2024-04-13 15:23:23 发布

阅读量4.8k

点赞数

分类专栏： js/jquery/css 文章标签：不依赖input file标签上传图片

本文链接：https://blog.csdn.net/lein_wang/article/details/84443909

版权

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

56 篇文章 0 订阅

订阅专栏

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

lein_wang

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
不依赖input file标签上传图片

由于安全策略的原因，js没法直接读本地磁盘的图片(IE不考虑)。不用input file，就是不想去选文件，我就要用固定的图片上传，这个固定可能是固定的某一张图片，也可能是固定策略生成的图片(每次都生成，但每次都不一样，比如聊天截图。。。)。第一种方式：图片转canvas -----》base64上传。(这种方式如果不支持canvas的情况就没法用)第二种方式：用ajax读这个图片ur...
复制链接

扫一扫