<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><link rel="stylesheet" href="css/reset.css" /><script type="text/javascript" src="js/jquery-1.9.1.min.js"></script><title>添加资讯页</title><style> ???*{margin: 0px; padding: 0px; font-size: 18px;} ???li{list-style: none;} ???.leftLi{ ???????text-align: left; ???} ???.rightLi{ ???????min-width: 500px; ???????text-align: left; ???} ???.imgWrap{ ???????position: relative; ???????z-index: 1; ???????width: 120px; ???????height: 120px; ???????border-radius: 3px; ???} ???#img0{ ???????width: 120px; ???????height: 120px; ???????float: left; ???} ???#file0{ ???????position: absolute; ???????top: 0; ???????display: none; ???}</style><script> ???$(function(){ ???????????????$("#img0").click(function(){ ???????????????????????$("#file0").click(); ???????????????????}) ???????????????$("#file0").change(function(){ ???????????????????var objUrl = getObjectURL(this.files[0]) ; ???????????????????console.log("objUrl = "+objUrl) ; ???????????????????if (objUrl) { ???????????????????????$("#img0").attr("src", objUrl) ; ???????????????????} ???????????????}) ; ???????????????//建立一個可存取到該file的url ???????????????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></head><body><ul> ?????<li class=""> ?????????<div class="leftLi"> ?????????????<span>封面:</span> ?????????????<span style="color: #f00;">点击图片进行封面更换</span> ?????????</div> ???????<div class="rightLi"> ???????????<div class="imgWrap"> ???????????????<input type="file" name="file0" id="file0" multiple="multiple" /> ???????????????<img src="img/add.png" id="img0" > ???????????</div> ???????</div> ?????</li> ?????</ul> </form></div></div></body></html>html5利用getObjectURL获取图片路径上传图片
原文地址：https://www.cnblogs.com/ourLifes/p/10028083.html