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

原创已于 2022-03-10 15:34:09 修改 · 1.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2019-07-04 15:57:48 首次发布

js 专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何在Web前端实现图片上传实时预览功能，利用HTML5的FileReader API将图片转换为Base64编码，适用于JPG和GIF格式。同时，文章提供了两种实现方法，包括直接展示预览图和通过Ajax上传至服务器。

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

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

借鉴网址：https://blog.youkuaiyun.com/static_coder/article/details/78072171
https://segmentfault.com/a/1190000006140042

HTML5的FileReader的使用:https://blog.youkuaiyun.com/zyddj123/article/details/72519149

FileReader（） 是一个构造函数。 使用的时候，先通过构造函数初始化一个FileReader对象,如：
const reader= new  FileReader()
开始读取指定的Blob中的内容。一旦完成，result属性中将包含一个data: URL格式的字符串以表示所读取文件的内>容。
reader.readAsDataURL(file)
在读取后，触发的事件，并获取读取文件的地址
reader.onload = (e) => {
      let base64Str = reader.result.split(',')[1]
      img.src = e.target.result
	}

https://segmentfault.com/a/1190000012327982
https://segmentfault.com/a/1190000012327982
在这里插入图片描述

方法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("."));//截取出文件后缀
		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>

上传图片

1、html

 <div class="uploadImgItem">
		<div class="uploadImgBox">
         <span class="uploadImgBox_del glyphicon glyphicon-trash"></span>
            <input class="uploadImgSrc" type="hidden" value="{{item.attachment.path}}">
              <input class="attachmentUuid" type="hidden" value="{{item.attachmentUuid}}">
           <input class="uuid" type="hidden" value="{{item.uuid}}">
            <input class="uploadImgP" type="hidden" value="{{item.certificatesName}}">                                        
            <img src="{{item.attachment.path}}" alt="">
  </div>
 <p>{{item.certificatesName}}</p>
 </div>
  <div class="fileinput-button showUpload">
                                                            <div class="upload-sign"> <i class="glyphicon glyphicon-plus"></i></div>
                                                        </div>

弹框

2、js

     // 上传图片
    addImg: function (input) {
        $(input).change(function () {
            // input:file的对象
            var file = $(this)[0];
            // 上传成功后图片存放地址
            var content = $('#upLoadModal .uploadImgContent');
            // 上传并添加图片
            UI.getFileBase64(file, '', content, 'image');
        })
    },

3、上传图片
async upload() {
//先用ajax一起很多传到控制器 64位码控制器得到之后循环请求java接口注意变同步定义空数组每一次请求都push数组然后 json形式在ajax 请求的那个就可以拿到接口

 try {
        const ctx= this.ctx;
        //const { laList, updateBy } = ctx.request.body;
        const laList = ctx.request.body.laList;
        let imgList= [];
        //循环遍历 base64
        laList.forEach((item, index) => {
            imgList[index] = {};
            imgList[index].type = item.replace(/data:image\/([^;]+).*/i,'$1');
            imgList[index].base64 = item.replace(/^data:image\/\w+;base64,/,'');
        })
         const  ids = [];
        for(let i = 0; i < imgList.length; i++ ) {
            const form =new FormData();
            const { type, base64 } = imgList[i];
            var dataBuffer= new Buffer(base64, 'base64');
            form.append('file', dataBuffer, {
                //保证图片名字不一样
                filename:Date.parse(new Date())+ `.${type}`,
                contentType:`image/${type}`,
                konwnLength: dataBuffer.length
            })
            // form.append('updateBy', updateBy)
            // 注意此处必须返回一个 promise
            ids[i] = await this.ctx.service.upload.upload(form);
        }
        await Promise.all(ids).then((allData) => {
            //返回的也是数组
            ctx.body = allData[0].data;
        }).catch((err) => {
            console.log(err);
        })

    } catch (err) {
        this.ctx.logger.error(err);
        const { serviceurl } = this.app.config.url;
        this.ctx.redirect(serviceurl + '/404');
    }
}