想做一个PHP图片上传前预览，麻烦帮忙看下为啥预览不能显示

Posted 2023-05-16

<td class="title1"><div align="right">图片：</div></td>
<td><input type="file" name="img" id="imgpath">
<input type="button" name="look" value="预览" onclick="img1()" /></td>
</tr>
<tr>
<td height="243" class="title1"> </td>
<td><img height="400px" width="400px" id="img2" /></td>
</tr>
<tr>
<td colspan="2" class="title1" align="center"><input name="submit" type="image" src="images/ok.gif"/><a href="picture.php?page=1"><img src="images/return.gif" border="0" /></a></td>
</tr>
</table>
<script>
function img1()

var a=document.getElementById('imgpath').value;
document.getElementById('img2').src=a;

</script>
</form>

ie8以下的版本应该能预览，ie9,火狐，谷歌等浏览器出于安全考虑，已经取消了显示本地文件的权限，只能读取缓存里的文件。
1.你可以用flash上传插件做预览;
2.你可以先把文件传到服务器临时文件里，如百度这是这样子;确定保存后再从临时文件里移动到上传目录;
3.你可以用兼容html5做预览，不兼容html5的浏览器反而支持你上面的这种预览方法，所以就可兼容目录所有浏览器了。。
如果要做经常上传图片的可以用第3种，如果就是偶尔插图上传头像的，就用第二种好了。。。

回答不专业。。爱看不看 参考技术A jquery + php 图片上传预览
HTML：
<form id="uploadForm" enctype="multipart/form-data" method="post" >
<input id="file" type="file" name="file"/>
<button id="upload" type="button" >保存图片</button>
</form>

juqery:
<script>
$("#file").change(function()
var objUrl = getObjectURL(this.files[0]) ;
console.log("objUrl = "+objUrl) ;
if (objUrl)
$("#img0").attr("src", objUrl) ;
console.log(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>
<script>
var Url=":U('Admin/Index/img')";
$(document).ready(function()
$("#upload").click(function()
$.ajax(
url: Url,
type: 'POST',
cache: false,
data: new FormData($('#uploadForm')[0]),
processData: false,
contentType: false,
dataType:"text"
).done(function(res)
//$("#img0").attr("src", res) ;
if(res==1)
layer.alert('成功', icon: 1);
else
layer.alert('失败', icon: 2);

).fail(function(res)
console.log(res)
);
)
);
</script>
php :
public function img()
$login_id=session('login_id');
//图片上传设置
$config = array(
'maxSize' => 3145728,
'savePath' => '',
'saveName' => array('uniqid',''),
'rootPath' => './Images/',
'exts' => array('jpg', 'gif', 'png', 'jpeg'),
'autoSub' => false,
);
$upload = new \Think\Upload($config);// 实例化上传类
$images = $upload->upload();
//dump($images);
//判断是否有图
if($images)
$info=$images['file']['savename'];
// ob_start();
// dump($info);
// $rs=ob_get_clean();
// file_put_contents("2.html", $rs);
echo 1;
$count=M('user_portrait')->where('user_id='.$login_id)->getField('location');
if($count)
$infos=('Images/').$info;
$res=M('user_portrait')->where('user_id='.$login_id)->save(array('location'=>$infos));
else
$datas['user_id']=$login_id;
$datas['location']=('Images/').$info;
$res2=M('user_portrait')->add($datas);

if($res)
$path="D:/wwwroot/test/".$count;
//$path="/www/web/default/".$count;
unlink($path);


else
echo 0;

6.上传前图片预览

1、html 代码：

<div class="file-box">
<form action="upload.class.php" id="form_id" method="post" enctype="multipart/form-data" >
<input type="file" name="imagename" id="imagename" onblur="getimage(this)" />
<input type="button" class="btn" value="上传" onclick="form_register();" />
</form>
<img id="img_id" />
</div>

 

2、js代码

function getimage(obj)
{　
　　var pic = obj.files[0];
　　var freader = new FileReader();
　　freader.readAsDataURL(pic);
　　freader.onload = function(e) {
　　document.getElementById(‘img_id‘).attr("src",e.target.result);
　　}

}