一個圖片上傳之後是不可以直接預覽的，通常是需要刷新界面一下。
這個問題可以通過iframe窗口刷新來解決，不過也可以使用其他插件來解決。
<body>
<iframe name="upload_targer" id="upload_targer" style="width:1000px;height: 1000px;overflow: hidden;border: 0; "></iframe>
<img src="" id="tag_img">
<form action="e.php" method="post" accept-charset="utf-8" enctype="multipart/form-data" target="upload_targer">
<input type="file" name="userfile" class="userfile" value="">
<input type="submit" name="uploadimg" value="submit" id="img_submit">
</form>
</body>
這是一個簡單的上傳的前端， 也可以把iframe中的css樣式設置爲不可見的。
這樣在上傳圖片時iframe窗口中的刷新便無法看見也就實現了上傳即預覽。
上傳之後我們需要通過後臺文件來處理在輸出你所上傳圖片的路徑，
<?php
$array = array(
<span style="white-space:pre"> </span>'data'=>array(
<span style="white-space:pre"> </span>'img'=>'',
<span style="white-space:pre"> </span>'url'=>''
<span style="white-space:pre"> </span>),
<span style="white-space:pre"> </span>'message'=>'',
<span style="white-space:pre"> </span>'code'=>0
);
if ($_FILES['userfile']['error']>0){
<span style="white-space:pre"> </span>$array['message'] = "!problem";
<span style="white-space:pre"> </span>switch ($_FILES['userfile']['error']) {
<span style="white-space:pre"> </span>case 1:
<span style="white-space:pre"> </span>echo '文件大小超出服務器限制';
<span style="white-space:pre"> </span>break;
<span style="white-space:pre"> </span>case 2:
<span style="white-space:pre"> </span>echo '文件太大';
<span style="white-space:pre"> </span>break;
<span style="white-space:pre"> </span>case 3:
<span style="white-space:pre"> </span>echo '文件只加載了一部分';
<span style="white-space:pre"> </span>break;
<span style="white-space:pre"> </span>case 4:
<span style="white-space:pre"> </span>echo '文件加載失敗';
<span style="white-space:pre"> </span>break;
<span style="white-space:pre"> </span>}
exit;
}
if($_FILES['userfile']['size']>1000000){
<span style="white-space:pre"> </span>echo "文件過大";
<span style="white-space:pre"> </span>exit;
}
if($_FILES['userfile']['type'] != 'image/jpeg'){
<span style="white-space:pre"> </span>echo "上傳的文件不是jpeg格式";
<span style="white-space:pre"> </span>exit;
}
$type = '.jpg';
$upfile = $_SERVER['DOCUMENT_ROOT'];
if (is_uploaded_file($_FILES['userfile']['tmp_name'])){
<span style="white-space:pre"> </span>if(!rename($_FILES['userfile']['tmp_name'], $upfile .'/'. $_FILES['userfile']['name']))
<span style="white-space:pre"> </span>echo "文件保存失敗";
}
else {
<span style="white-space:pre"> </span>echo "problem";
<span style="white-space:pre"> </span>exit;
}
//$upimgurl = '.' . $upfile. '/' .$_FILES['userfile']['name'];
$array['data']['url'] = $upimgurl;
echo "success";
$array['code'] = 0;
if($array['code'] == 0)
$array['data']['img'] = $upimgurl;
$upurl = $_FILES['userfile']['name'];
echo "<input type='text' value='$upurl' id='upimgurl'>" ;
將文件輸出後，我們就要通過js來獲得iframe當中text標籤的val。
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#img_submit').click(function() {
$($("#upload_targer")).on('load', function(event){
event.preventDefault();
var iframe = this.contentWindow;
$('#tag_img').attr("src",$(iframe.document.getElementById('upimgurl')).val());
})
});
})
</script>
這樣就可以實現上傳即預覽了。