Question

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

<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>

Answer 1

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

回答不专业。。爱看不看

Answer 2

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;
}
}