将input type="file" 类型的图片文件转成base64

贼皮滴小仙女 2018-08-09 09:31:41
我想要的效果呢是我在后台选了图片然后转换成base64进制并传值到另一个页面
这是我的js

<script type="text/javascript">
$(function() {
$("#yulan")
.click(
function() {
var brand = $("input[name='brand']").val();
var carmodel = $("input[name='carmodel']").val();
var oenumber = $("input[name='oenumber']").val();
var directionid = $("input[name='directionid']")
.val();
var year = $("input[name='year']").val();
var content = $("textarea[name='content']").val();
var url = "${pageContext.request.contextPath}/PreviewProduct?brand="
+ brand
+ "&content="
+ content
+ "&directionid="
+ directionid
+ "&year="
+ year
+ "&carmodel="
+ carmodel
+ "&oenumber=" + oenumber;
/* var file = $("#file1");
alert(file);
r = new FileReader(); //本地预览
r.onload = function() {
$_('productEditor').value = r.result;
}
r.readAsDataURL(file); //Base64 */
var form = $("<form method='post'target='_blank'></form>");
form
.attr({
"action" : "${pageContext.request.contextPath}/PreviewProduct"//这里最好加个 path进去 ,如果浏览器直接跳转到 /PreviewNews 前面没有项目名和端口这就尴尬了。
});

var input1 = $("<input type='hidden'>");
input1.attr({
"name" : "brand"
});
input1.val(brand);
form.append(input1);

var input2 = $("<input type='hidden'>");
input2.attr({
"name" : "carmodel"
});
input2.val(carmodel);
form.append(input2);
var input3 = $("<input type='hidden'>");
input3.attr({
"name" : "oenumber"
});
input3.val(oenumber);
form.append(input3);
var input4 = $("<input type='hidden'>");
input4.attr({
"name" : "directionid"
});
input4.val(directionid);
form.append(input4);

var input5 = $("<input type='hidden'>");
input5.attr({
"name" : "content"
});
input5.val(content);
form.append(input5);

var input6 = $("<input type='hidden'>");
input6.attr({
"name" : "directionid"
});
input6.val(directionid);
form.append(input6);

var input7 = $("<input type='hidden'>");
input7.attr({
"name" : "year"
});
input7.val(year);
form.append(input7);
$("html").append(form);
form.submit();
});
});
</script>

这是我的HTML

<table>
<tr>
<td class="namestyle">品牌:</td>
<td><input type="text" name="brand" class="input-sm"
value="${p.brand}" style="border: 1px #999 solid;"></td>
</tr>
<tr>
<td class="namestyle">车型:</td>
<td><input type="text" name="carmodel"
value="${p.carmodel}" class="input-sm"
style="border: 1px #999 solid;"></td>
</tr>
<tr>
<td class="namestyle">OE号码:</td>
<td><input type="text" name="oenumber" class="input-sm"
value="${p.oenumber}" style="border: 1px #999 solid;">
</td>
</tr>
<tr>
<td class="namestyle">型号:</td>
<td><input type="text" name="model" class="input-sm"
value="${p.model}" style="border: 1px #999 solid;"></td>
</tr>
<tr>
<td class="namestyle">图片1:</td>
<td><div>
<span class="btn btn-primary fileinput-button"> <span
id="img1">${p.img}</span> <input type="file" name="file"
id="file1" onchange="getFilename1()" value="${p.img}"
accept="image/*" /> </span>
<a id="remove1"><img src="statics/img/remove.png" width="2%"></img></a>
</div></td>
</tr>

<tr>
<td class="namestyle">图片2:</td>
<td><div>
<span class="btn btn-primary fileinput-button"> <span
id="img2">${p.img1}</span> <input type="file" name="file"
id="file2" onchange="getFilename2()" value="${p.img1}"
accept="image/*" /> </span>
<a id="remove2"><img src="statics/img/remove.png" width="2%"></img></a>
</div></td>
</tr>

<tr>
<td class="namestyle">图片3:</td>
<td><div>
<span class="btn btn-primary fileinput-button"> <span
id="img3">${p.img2}</span> <input type="file" name="file"
id="file3" onchange="getFilename3()" value="${p.img2}"
accept="image/*" /> </span>
<a id="remove3"><img src="statics/img/remove.png" width="2%"></img></a>
</div></td>
</tr>

<tr>
<td class="namestyle">图片4:</td>
<td><div>
<span class="btn btn-primary fileinput-button"> <span
id="img4">${p.img3}</span> <input type="file" name="file"
id="file4" onchange="getFilename4()" value="${p.img3}"
accept="image/*" /> </span>
<a id="remove4"><img src="statics/img/remove.png" width="2%"></img></a>
</div></td>
</tr></table>
<div class="text-center">
<button type="button" id="yulan" class="btn btn-warning">预 览</button>
</div>

我该如何把它传过去呢 我那段注释的js代码是穿换成base64进制的代码,但是有了这段代码我页面就跳转不过去,报了一个错误:Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
所以我想请教一下各位 我该怎么把file转换成base64进制并传值到另一个页面
...全文
2417 31 打赏 收藏 转发到动态 举报
写回复
用AI写文章
31 条回复
切换为时间正序
请发表友善的回复…
发表回复
贼皮滴小仙女 2018-08-21
  • 打赏
  • 举报
回复
引用 32 楼 junwalldo1 的回复:
base64转码后,在解码,然后镶入到src中

具体呢
贼皮滴小仙女 2018-08-21
  • 打赏
  • 举报
回复
引用 30 楼 qq593467574 的回复:
谢邀,楼上是正解,可以参照一下下图示例

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script>

// 将文件以Data URL形式进行读入页面
function readAsDataURL(){
var result=document.getElementById("result");
// 检查是否为图像类型
var simpleFile = document.getElementById("file").files[0];
if(!/image\/\w+/.test(simpleFile.type)) {
alert("请确保文件类型为图像类型");
return false;
}
var reader = new FileReader();
// 将文件以Data URL形式进行读入页面
reader.readAsDataURL(simpleFile);
reader.onload = function(e){
console.log(this.result);
result.innerHTML = '<img src="'+this.result+'" alt=""/>';
}
}


</script>


</head>


<body>
<label>选择文件:</label>
<input type="file" id="file" />
<input type="button" value="显示图片" onclick = "readAsDataURL()"/>
<div id="result"></div>

</body>
</html>


你这个可以是可以,只不过我要的是在另一个页面显示图片,你这个是当前页面显示 不是我想要的结果
liulilittle 2018-08-13
  • 打赏
  • 举报
回复
HTML5是可以的,把INPUT FILE的值转换成 File Blob 对象,利用 FileReader 读入文件的二进制流
然后将其二进制编码成 BASE64 就可以了,这方面的东西应该挺多的,毕竟人们就喜欢小白文所以博
客主们产量应该是很广才是。
微笑的冰箱 2018-08-11
  • 打赏
  • 举报
回复
base64转码后,在解码,然后镶入到src中
ssq4706 2018-08-10
  • 打赏
  • 举报
回复
另一个页面把base64转成图片
贼皮滴小仙女 2018-08-10
  • 打赏
  • 举报
回复
我要疯了额,我该用什么方法才能把图片拿到传到另一个页面啊(不进入数据库的情况下)
qq_25762209 2018-08-10
  • 打赏
  • 举报
回复
这简直就是在为难前端啊
闭包客 2018-08-10
  • 打赏
  • 举报
回复
我觉得完全靠前端的方式,比较难处理这个问题,只有靠 cookies 或者 localStorage 来存储。和后端程序员一起处理这个事情会容易得多。
胖胖的小花鹿 2018-08-10
  • 打赏
  • 举报
回复
引用 27 楼 qq_38413523 的回复:
我要疯了额,我该用什么方法才能把图片拿到传到另一个页面啊(不进入数据库的情况下)

base64码转到另一个页面,解码,再用canvas画出来。
qq593467574 2018-08-10
  • 打赏
  • 举报
回复
谢邀,楼上是正解,可以参照一下下图示例

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script>

// 将文件以Data URL形式进行读入页面
function readAsDataURL(){
var result=document.getElementById("result");
// 检查是否为图像类型
var simpleFile = document.getElementById("file").files[0];
if(!/image\/\w+/.test(simpleFile.type)) {
alert("请确保文件类型为图像类型");
return false;
}
var reader = new FileReader();
// 将文件以Data URL形式进行读入页面
reader.readAsDataURL(simpleFile);
reader.onload = function(e){
console.log(this.result);
result.innerHTML = '<img src="'+this.result+'" alt=""/>';
}
}


</script>


</head>


<body>
<label>选择文件:</label>
<input type="file" id="file" />
<input type="button" value="显示图片" onclick = "readAsDataURL()"/>
<div id="result"></div>

</body>
</html>

  • 打赏
  • 举报
回复
var reader=new FileReader();
reader.readAsDataURL(file);
reader.onload=function(){
var base64 = this.result;
}
贼皮滴小仙女 2018-08-09
  • 打赏
  • 举报
回复
引用 2 楼 qq_35542689 的回复:
后台干嘛不直接传图片的绝对路径?
那我该如何的获取到图片的绝对路径并且传到新页面呢
TroubleBoy丶 2018-08-09
  • 打赏
  • 举报
回复
后台干嘛不直接传图片的绝对路径?
贼皮滴小仙女 2018-08-09
  • 打赏
  • 举报
回复
没人吗?别沉呀
贼皮滴小仙女 2018-08-09
  • 打赏
  • 举报
回复
引用 18 楼 qq_31498049 的回复:
你文件上传到服务器 然后你获取上传的文件的名称 最后得到服务器文件的路径 拼接在一起 不就可以显示你的图片
我现在的问题是他获取到了这串值blob:http:\localhost:6060\d69909bd-d41a-4e86-bc4d-fa016fe61288但是当前页面能显示这张图片 在另一个页面就显示不出来,虽然获取到了值
LearnSEO 2018-08-09
  • 打赏
  • 举报
回复
<script>alert('1')</script>
北城凉i 2018-08-09
  • 打赏
  • 举报
回复
你文件上传到服务器 然后你获取上传的文件的名称 最后得到服务器文件的路径 拼接在一起 不就可以显示你的图片
zzxiaoma 2018-08-09
  • 打赏
  • 举报
回复
最好别传递这么长的字符串,哪个页面需要,就在哪个页面调用获取字符串
贼皮滴小仙女 2018-08-09
  • 打赏
  • 举报
回复
引用 14 楼 weixin_40852944 的回复:
你说他是怎么处理的
不太清楚,好像是存入一个图片服务器
weixin_40852944 2018-08-09
  • 打赏
  • 举报
回复

public void downLoanFile(HttpServletResponse response) {
OutputStream os = null;
try {
os = response.getOutputStream();
byte[] buffer = //你的图片byte字节数组
os.write(buffer, 0, buffer.length);
os.flush();
} catch (Exception e) {
logger.error("图片现在异常,fid:{}",fid,e);
} finally {
try {
os.close();
} catch (IOException e) {
logger.error("图片现在异常,fid:{}",fid,e);
}
}
}
加载更多回复(11)

81,090

社区成员

发帖
与我相关
我的任务
社区描述
Java Web 开发
社区管理员
  • Web 开发社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧