精华内容
下载资源
问答
  • 不依赖input file标签上传图片

    千次阅读 2018-11-24 15:26:21
    由于安全策略的原因,js没法直接读本地磁盘的图片(IE不考虑)。 不用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>
    

     

    展开全文
  • 今天在写html图片input标签图片上传预览,出现了C:\fake\路径问题,在纠结了一个多小时为什么的时候,实在不知道怎么办了,就来博客找大佬,才发现由于浏览器的安全机制,把要上传的图片真实路径给隐藏了,对外只...

    图片上传路径C:\fakepath\问题

    今天在写html图片input标签图片上传预览,出现了C:\fake\路径问题,在纠结了一个多小时为什么的时候,实在不知道怎么办了,就来博客找大佬,才发现由于浏览器的安全机制,把要上传的图片真实路径给隐藏了,对外只显示C:\fakepath+图片名

    我们需要对图片路径进行处理,要用到objcetURL = window.URL.createObjectURL(file || blob);
    语法:objcetURL = window.URL.createObjectURL(file || blob);
    参数:File对象和Blob对象;File对象就是一个文件,比如:用file type=”file”标签来上传文件,那么里面的每个文件都是一个file对象。Blob对象就是二进制数据,比如在XMLHttpRequest里,如果指定requestType为blob,那么得到的返回值也是一个blob对象。
    每次调用createObjectURL的时候,一个新的URL对象就被创建了。即使你已经为同一个文件创建过一个URL.,如果你不再需要这个对象,要释放它,需要使用URL.revokeObjectURL()方法.。当页面被关闭,浏览器会自动释放它,但是为了最佳性能和内存使用,当确保不再用得到它的时候,就应该释放它。
    URL对象是硬盘(SD卡等)指向文件的一个路径,如果我们做文件上传的时候,想在没有上传服务器端的情况下看到上传图片的效果图的时候就可是以通过var url=window.URL.createObjectURL(obj.files[0]);获得一个http格式的url路径,这个时候就可以设置到中显示了。
    window.webkitURL和window.URL是一样的,window.URL标准定义,window.webkitURL是webkit内核的实现(一般手机上就是使用这个),还有火狐等浏览器的实现。

    话不多说,上代码:纯js代码

    function getObjectURL(file) { 
    		var url = null; 
    		if (window.createObjcectURL!= undefined) { 
    			url = window.createOjcectURL(file);
    		} else if (window.URL != undefined) {
    			url = window.URL.createObjectURL(file);
    		} else if (window.webkitURL != undefined) { 
    			url = window.webkitURL.createObjectURL(file);
    		} 
    		return url; 
    	}
    
    function previewImg(obj){
        //通过id获取input框,files[0]是获取第一个文件
        
    	var file = document.getElementById("myfile").files[0];
    	
    	//调用getObjectURL(file)方法返回图片真实路径blob:null/61de3aa9-a75f-4265-
    	9d4b-50d4b5977dda,这里的路径是加密的
    	
    	var str = getObjectURL(file);
    	
    	//通过在网页中添加innerHTML属性在div中添加img标签
    	
    	document.getElementById("previewImg").innerHTML="<img src='"+file+"'/>";
    } 
    

    关于window.URL.createObjectURL(file || blob)详情请参考Web API

    展开全文
  • input标签获取图片并展示

    千次阅读 2018-03-31 14:28:45
     但是今天遇到一个问题:但点击input标签选择文件时,得到路径值却是这样C:\fakepath\test.jpg,中间的路径被fakepath代替,分析如下:原因:由于浏览器的安全机制,当我们获取input file的路径时被fakepath代替,...

    之前写过从后台获取项目外的图片并在前端展示时使用的方法是

    Base64Encoder.encode(byte[] buffer);
     但是今天遇到一个问题:

    但点击input标签选择文件时,得到路径值却是这样C:\fakepath\test.jpg,中间的路径被fakepath代替,分析如下:

    原因发火

    由于浏览器的安全机制,当我们获取input file的路径时被fakepath代替,隐藏了真实物理路径。 当然,调整浏览器的浏览器安全设置可以解决这个问题,如:1.设置IE:工具 -> Internet选项 -> 安全 -> 自定义级别 -> 找到“其他”中的“将本地文件上载至服务器时包含本地目录路径”,选中“启用”即可 但是这种解决办法显然不是我们想要的再见,不可能让每个用于都去设置浏览器安全选项。


    解决方法得意

    直接上代码

    <script type="text/javascript">
        var file=$("#file");
        file.change(function () {
            $("#image").attr("src",getObjectURL(file[0].files[0]));
        });
        function getObjectURL(file) {
            var url = null;
           /* window.URL = window.URL || window.webkitURL;*/
    
            if (window.createObjcectURL != undefined) {
                url = window.createOjcectURL(file);
            } else if (window.URL != undefined) {
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) {
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }
    file对象是一个input

    返回的url是这样的 blob:http%3A//localhost%3A8083/2ff77702-8153-4174-a354-05a92c2c0534

    把这个二进制对象赋值给img标签的src属性就可以显示了

    知识获取奋斗

            URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL,这个URL的生命仅存在于它被创建的这个文档里,新的对象URL指向执行的File对象或Blob对象。
    语法:objcetURL = window.URL.createObjectURL(file || blob);
    参数:File对象和Blob对象;File对象就是一个文件,比如我用file type="file"标签来上传文件,那么里面的每个文件都是一个file对象。Blob对象就是二进制数据,比如在XMLHttpRequest里,如果指定requestType为blob,那么得到的返回值也是一个blob对象。
    每次调用createObjectURL的时候,一个新的URL对象就被创建了。即使你已经为同一个文件创建过一个URL.,如果你不再需要这个对象,要释放它,需要使用URL.revokeObjectURL()方法.。当页面被关闭,浏览器会自动释放它,但是为了最佳性能和内存使用,当确保不再用得到它的时候,就应该释放它。

    展开全文
  •  说明:如果图片存在,但网络很不通畅,也可能触发 onerror。  解决方法:  1、用html转义,将转义成转义符,这样标签就编程了文本了(QQ空间的做法)  2、使用jsoup白名单过滤掉onerror关键字,让他...

        因为最近在学习web安全,出于好奇,尝试对CSDN进行了XSS注入,没想到真的成功了。

        操作步骤:

        直接找一篇博客,在底下评论

    <img src="pic.gif" οnerrοr="javascript:this.src='/noPic.gif';" alt="pic" />

        因为CSDN做了简单的转义,他会将注入的标签,去掉闭合性,也就是会把我注入的内容处理为:

    <img src="pic.gif" οnerrοr="javascript:this.src='/noPic.gif';" alt="pic">

        这样,注入的标签就失去了他的闭合性了,对一些普通的攻击就进行了防御,但是onerror事件是专门针对js出错的,所以,标签闭合性被破坏刚好触发了这个事件,所以,他会被执行,执行之后将img标签的src属性替换成我们想要的属性,然而我注入的这个地址,故意又是一个不能访问的地址,于是,就反复的触发这个onerror事件,最终导致浏览器堆栈溢出了。

        说明:如果图片存在,但网络很不通畅,也可能触发 onerror。

        解决方法:

        1、用html转义,将<>转义成转义符,这样标签就编程了文本了(QQ空间的做法)

        2、使用jsoup白名单过滤掉onerror关键字,让他不要在前台显示(这种更安全,因为转义还有可能被绕过)

    展开全文
  • H5 img标签图片无法显示 -- 解决方案

    万次阅读 2017-01-10 19:41:22
    如果你也曾复制过一些类似腾讯、百度等各大网站的文章,你会发现黏贴下来发表之后经常出现图片无法显示,这是怎么出现的呢?例如: 解决方案使用Referer Meta标签控制referer,在H5 的 header加入meta<me
  • 关于HTML中的img标签图片路径问题

    千次阅读 2020-06-21 12:15:03
    img标签中,src表示图片的路径,alt表示图片无法加载出来时的提示,title表示图片加载出来后的提示! (温馨提示:图片路径不要像笔者一样含有汉字,有很大机率会出错哦!) src-图片的路径问题 1、html文件和图片(f...
  • img标签不能访问本地图片

    万次阅读 2017-12-01 22:14:10
    由于现在的浏览器为了安全(我也不知道什么原理),就导致了我们在写web项目时img标签不能访问本地图片,对于问我们这种新手而言无疑是很难过了 比如: 这三种都不能用了,但是我想到几周前写的代码又是可以的...
  • 温馨提示:千峰网络安全视频到HTML学习的这一块的顺序有点乱,我给大家整理了一下: 1、基础环境搭建 p177 p201 2、HTML标签基础 p198p222 3、HTML常用的标签 p200p224 4、HTML表格 p199p223 5、HTML表单 p179...
  • 利用TFRecords存储与读取带标签图片觉得有用的话,欢迎一起讨论相互学习~Follow MeTFRecords其实是一种二进制文件,虽然它不如其他格式好理解,但是它能更好的利用内存,更方便复制和移动,并且不需要单独的标签...
  • Html之图片标签自动跳转

    千次阅读 2019-07-10 08:54:59
    1.引入jquery <script src=...</script> 2.图片代码 <a href="xxx.com" target="_parent"><img id="sp"></img></a> 3.自动点击 $(f...
  • 最近做图片预览,发现了一个图片棘手的问题,那就是浏览器兼容性问题,就是如标题,IE9以下不支持img标签的src预览。本人在网上做了大量的搜索。终于得出了一个可靠的解决办法。另外也总结了以下网上所说的错误的...
  • 标签,就可以解决页面加载网络图片的问题, 原因大概是网络安全的问题,别人的页面做了安全防护的问题。 在html的head标签中加上: <meta name="referrer" content="no-referrer" /> <!--可以让img标签...
  • Html标签带来的安全隐患

    千次阅读 2006-07-08 02:29:00
    经过研究发现,即使是最安全安全代码(已经排除了通常所说的Xss漏洞)也无法避免另外一种恼人的攻击方式,配合不严格的程序,可能被人利用产生更大的威胁。我们就以现在广泛存在于论坛,文章系
  • 说明后台返回图片二进制流,需要使用get请求获取返回结果,并且将返回的二进制流以图片形式显示在页面img中。 但是日常显示图片都诸如这种形式:图片路径、地址" alt="" />以上需求不能将后端地址直接填入src(原因...
  • 基于html中canvas标签的验证码图片生成方法小前端一只,在自己网站中写了一个留言功能,需要随机生成验证码,发现网上大多是用后台技术生成,无奈本人看不明白,无奈之下<canvas id="canvas" width="120" height="40"></...
  • 标签,就可以解决页面加载网络图片的问题,原因大概是网络安全的问题,别人的页面做了安全防护的问题。&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport&...
  • 在Vue中span标签的背景图是根据后台返回的数据动态显示的图片,如下图中的的红圈是根据后台返回的数据动态显示的图片,对应的HTML是.icon元素实现元素的背景图的动态显示的具体操作如下1)根据后台返回的数据,在该...
  • HTML标签学习

    千次阅读 2021-04-10 13:50:52
    自定义列表列表标签全部代码图片标签学习代码粘贴超链接标签学习a标签锚点学习代码粘贴表格标签的学习表格的合并代码粘贴表格标签练习(绘出求职简历表)内嵌标签的学习框架标签的学习form表单标签的学习from表单域...
  • 今天做项目的时候,遇到一个比较奇葩的问题,将后台返回的图片地址链接绑在img标签的scr上的时候,有时候会偶发的不显示,但是将后台返回的地址复制到浏览器,又能直接打开,我跑过去问后端,他说他知道这个问题,也...
  • HTML标签大全

    千次阅读 多人点赞 2020-04-05 16:28:50
    HTML标签列表标签:有序列表和无序列表:表格标签图片标签:超链接标签: 画中画标签: 框架标签: 表单标签: 其他标签: 超链接顶部位置 列表标签: <!--HTML注释:列表标签,可用于做目录等 列表标签:&...
  • 浏览器会在文档退出的时候自动释放它们,但是为了获得最佳性能和内存使用状况,你应该在安全的时机主动释放掉它们。 window .URL .revokeObjectURL (objectURL) ; 1 createObjectURL()方法,是接收一个文件的...
  • 这些数据可以是一张图片、asii文本、xml数据。用法如下: URI定义于IETF标准的RFC 239 你可以把一个Url链接看作一个“数据”,允许输入任何量的数据。这些数据可以是一张图片、asii文本、xml数据。用法如下: ...
  • Android 标签控件

    万次阅读 2014-07-25 22:14:53
     在有的应用中可能需要设置一些标签来方便用去去查询某些信息,比如手机助手或者购物软件之类都会有一些标签。对于软件开发初期来说,直接使用TextView、Button实现是最为简单的一种方式。但是这种方法也有其局限性...
  • 最近开始学习网络安全相关知识,接触了好多新术语,感觉自己要学习的东西太多,真是学无止境,也发现了好几个默默无闻写着博客、做着开源的大神。准备好好学习下新知识,并分享些博客与博友们一起进步,加油。非常...
  • 要在后台进行是否转义处理 /** ... * 功能说明::设置是否使用字符串安全转义  * @author auther  * @date  * @return  */  @Override  public boolean isSafeString() {  r
  • 【最新】解决Github网页上图片显示失败的问题

    万次阅读 多人点赞 2019-06-08 17:48:54
    好几个星期之前本人就发现自己的github在网页打开显示不了图片的问题了,不过当时没在意。 今天强迫症逼迫我一定要搞定它,于是去找了一些方法,自己做个记录,有相同问题的伙伴可以参考一下。 一、问题 比如随便...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 97,088
精华内容 38,835
关键字:

安全标签图片