js 图片上传图片预览效果

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

请选择桌面背景：<input type="file" name="fileField" id="fileField" onchange="showPic
(this)">
<div id="imgShow"></div>
<script language="javascript" type="text/javascript">
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=")
  if (c_start!=-1)
    { 
    c_start=c_start + c_name.length+1 
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    } 
  }
return ""
}
var showPic = function(obj){
	var img = document.createElement("IMG");
		img.src = "file:///" + obj.value;
		img.onerror = function(){
			this.parentNode.removeChild(this);
			alert("请选择一个正确的图片文件！");
		}
		
	var imgShow = document.getElementById("imgShow");
		imgShow.innerHTML = "";
		imgShow.appendChild(img);
	setCookie("deskbgpic",obj.value,1000);
}
document.write("上次选择的图片地址是:"+getCookie("deskbgpic")+"!");
document.getElementById("fileField").value=getCookie("deskbgpic");
if(getCookie("deskbgpic")!="") {
	
	showPic(document.getElementById("fileField"));
}	
</script>

提示：您可以先修改部分代码再运行

js 图片上传图片预览效果

相关文章

精彩推荐