15年软件开发经验 只做源码定制 互联网+定制化解决方案

15年软件开发经验,只做源码定制!

原创设计 定制开发

满足您的个性化需求

当前位置:首页 前端开发 H5

H5实现图片上传

王永康| 发布于 2021-10-20 22:45:51| 616阅读| 0点赞| 0评论
举报

当这个页面需要上传图片时,并要在页面中的某个地方实现预览

<div class="img-box jiaoao1" id="imgPreview" >
	<img  src="img/jiahao.png" >
     <input id="file" class="filesone"  type="file" accept="image/*" >
	<p>选择图片p>
div>
<div class="btn-box">
    <button type="button">立即提交button>
div>

对应的页面效果是:

    

上传图片思路

1.监听一个input(type=‘file’)的onchange事件,这样获取到文件file;
2.将file转成dataUrl;
3.然后根据dataUrl利用canvas绘制图片压缩,然后再转成新的dataUrl;
4.再把dataUrl转成Blob;
JQ代码$('.filestow').on('change',function(){
                var c_showImg =this.files[0];
                getObjectURLsss(c_showImg);
				console.log(123)
            })
            function getObjectURLsss(file) {
                var url = null;
                if(window.createObjectURL != undefined) { // basic
                    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);
                }
		// $('.jiaoao2').css("width","187px")
		$('.jiaoao2').css("border","1px solid black");
		$('.jiaoao2').css("margin-right","30px");
                $('.jiaoao2').css("background-image","url("+url+")");
                $('.jiaoao2').css("background-size","100% 100%")
                return url;
            

我这里使用的是更改这个框的样式 ,也就是背景图,用了很多创建URL的语句,需要进行一个又一个的判断

最终效果:





0

0条评论

别默默看啦~登录/注册一起参与讨论吧~

热门标签

王永康
微信扫一扫立即咨询
账号登录|扫码登录

立即注册 |忘记密码?

欢迎注册

已有账号马上登录

重置密码

扫码绑定微信
微信扫一扫

绑定手机号

分享到-微信

举报

  • 举报类型:

  • 举报描述:

您好,当前积分不足。

在线客服
拨打电话
17330196230 13230981129
顶部