您的位置：首页 > Web前端

简单的做一个图片上传预览（web前端）

2019-07-04 15:57 85 查看

简单的做一个图片上传预览（web前端）

借鉴网址：https://www.geek-share.com/detail/2717158926.html
https://segmentfault.com/a/1190000006140042
方法1

<body class="bg">
<h3>请选择图片文件：JPG/GIF</h3>
<form name="form0" id="form0">
<input type="file" name="file0" id="file0" multiple="multiple" /><br>
<img src="" id="img0"》
</form>
</body>
<script>
$("#file0").change(function () {
$("#img0").show();
var objUrl = getObjectURL(this.files[0]);//获取文件信息
console.log("objUrl = " + objUrl);
if (objUrl) {
$("#img0").attr("src", objUrl);
}
});

function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
</script>

方法2
选择了图片之后，js会先把已选的图片转化为base64格式，然后通过ajax上传到服务器端，服务器端再转化为图片，进行储存的一个过程。

<script>
$('#file0').change(function(){
var file = this.files[0]
/*验证文件的后缀
var name=file.name;
var namepre = name.substring(name.indexOf(".
3ff7
"));//截取出文件后缀
var nametype= file.type;
var reg = /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/;
if(reg.test(namepre)){
type='img'
}*/
if(file.size>2*1024*1024){
return false;
}
var reader=new FileReader();
reader.onload=function(){
var base64=this.result;
base64_uploading(base64);
/*console.log(base64);*/
$('#img0').attr('src', base64)
}
reader.readAsDataURL(file);
})
function base64_uploading(base64){
$ajax({
type:'post',
url:'',
data:{
'data': base64
},
dataType:'json',
success:function(data){
console.log(data)
},
error: function (xhr, type) {

}

})
}
</script>

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

标签：

相关文章推荐

新的分享

章节导航