html+js图片上传预览

最新推荐文章于 2024-04-29 14:19:42 发布

Kiss_Fly

最新推荐文章于 2024-04-29 14:19:42 发布

阅读量833

点赞数

分类专栏：前端技术文章标签： html 图片上传预览

本文链接：https://blog.csdn.net/Kiss_Fly/article/details/50605892

版权

前端技术专栏收录该内容

24 篇文章 1 订阅

订阅专栏

首先，是HTML编辑

        <div class="am-panel am-panel-default">
          <div class="am-panel-bd">
            <div class="am-g">
              <div class="am-u-md-4">
                <img id="img0" class="am-img-circle am-img-thumbnail" src="" alt=""/> 
              </div>
              <div class="am-u-md-8">
                <p>一个帅气或美腻的头像可以让你瞬间引起他或她的关注哟，快点上传头像吧。 </p>
                <form class="am-form" id="picForm" action="user_addEmployeePic" namespace="/" method="post" theme="simple">
                  <div class="am-form-group">
                    <input type="file" name="file" id="file" multiple="multiple" />
                    <input type="hidden" id="picUserID" name="picUserID" value="${editUser.userid }"/><br/>
                    <input type="text" name="photoMessage" value="风采备注..."/><br/>
                    <button type="submit" class="am-btn am-btn-primary am-btn-xs" >保存</button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>

然后是js效果

<script>
$("#file").change(function(){
	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) { // 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) ;
	}
	return url ;
}
</script>

最后图片展示