javascript简单图片上传预览制作

第一步写入input

.uploadWrap{
 font-size: 14px;
 line-height: 24px;
 cursor: pointer;
 height: 36px;
 width: 118px;
 margin-right: 6px;
 margin-left: 28px;
 position: relative;
 }

 .ph08{
 opacity: 0; //如果自定义上传按钮一般都会这样设置
 height: 36px;
 width: 118px;
 position: absolute;
 top: 0;
 left: 0;
 }

 
//图片显示dom



 
 上传海报
 

第二步js获取上传图片路径

//处理图片路径
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;
 }

$("#file0").change(function(){
 if (this.files && this.files[0]){
 var filePath = $('#file0').val().toLowerCase().split(".");
 var fileType = filePath[filePath.length - 1]; //获取图片格式
 if(fileType=='zip'||fileType=='rar'||fileType=='html'){
 alert("请上传图片格式");
 return false;
 }
 var objUrl = getObjectURL(this.files[0]);
 if(objUrl){
 console.log(objUrl);
 $("#poster").css("background-image","url("+objUrl+")");
 $("#file0").click(function(e){
 $("#poster").css("background-image","url("+objUrl+")");
 })
 }
 }
 })

这样获取到图片路径直接放入到你想要显示的dom就可以

效果.png