您的位置：首页 > Web前端

JS-前端实现图片上传

2017-02-06 14:14 357 查看

<!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="200" height="200"/><br/>
<input type="file" id="file" accept="image/gif,image/jpeg,image/jpg"><br/>
选择照片后存入64位照片数据<br/>
<textarea rows="10" cols="120" id="files"></textarea><br/>
data:image/jpeg;base64,<br/>
data:图片格式；<br/>
base64:64位;<br/>
","后面就是64位图片数据格式，传入后台转成2进制就可以写入图片了
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端

相关文章推荐

新的分享

章节导航