图片上传预览C:\fakepath\解决方案

最新推荐文章于 2021-06-10 18:11:26 发布

转载最新推荐文章于 2021-06-10 18:11:26 发布 · 1.1w 阅读

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的方法，该方法允许用户在上传图片文件时实时预览，并能将选中的图片转换为Base64编码格式。此技术适用于需要将图片作为字符串传递的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src="jquery-1.3.2-min.js"></script>
  <script type="text/javascript">
	$(function(){
		var path,clip = $("#image"),FileReader = window.FileReader;
		$("#file").change(function() {
			if (FileReader) {//chrome浏览器处理
				var reader = new FileReader(),
					file = this.files[0];
				reader.onload = function(e) {
					clip.attr("src", e.target.result);//这里是把图片转成64位数据存入<img>中的src里
				};
				reader.readAsDataURL(file);
				//这里需要延迟一下，否则无法放入文本框内
				//setTimeout("showchange()",1000);
			}
			else {//其他浏览器处理，火狐在这里就不写出来了，网上资料很多
				path = $(this).val();
				if (/"\w\W"/.test(path)) {
					path = path.slice(1,-1);
				}
				clip.attr("src",path);
			}
		});
		
	})
	//存入照片数据
	function showchange(){
			var s1 = $("#image").attr("src");
			$("#files").val(s1);
	}
 </script>
 </head>
 
 <body>
  照片
  <img id="image" src="" width="131" height="229"/><br/>
  <input type="file" id="file" accept="image/gif,image/jpeg,image/jpg"><br/>
   选择照片后存入64位照片数据<br/>
  <textarea rows="10" cols="120" id="files"></textarea>
  data:image/jpeg;base64,<br/>
  data:图片格式；<br/>
  base64:64位;<br/>
  ","后面就是64位图片数据格式，传入后台转成2进制就可以写入图片了
 </body>
</html>