1.原生寫ajax實現圖片預覽:

　　結構:?

? ? ?　　　　<input type="file"> 　　　　　　<img src="" alt=""> JavaScript代碼:? <script> document.querySelector('input').onchange =function(){ //創建異步對象 var ajax =new XMLHttpRequest(); //設置請求行 ajax.open('post','./backPreviewimg.php'); //2.0版本的可以不寫請求頭 //回調函數 ajax.onload =function(){ console.log(ajax.responseText); //把返回的URL直接給img即可 document.querySelector('img').src = ajax.responseText; } //設置formData var sendData =new FormData(); //沒有form表單的話 可以自己追加 sendData.append('icon',this.files[0]); //設置請求主體 ajax.send(sendData); } </script> 2.使用jQuery來實現圖片預覽 結構是跟原生的一樣的 　　js代碼:? <script src="../js/jquery-1.12.4.min.js"></script> <script> $(function(){ //使用ajax實現圖片預覽 $('input').change(function(){ var sendData =new FormData(); //當發送數據哪里沒有需要的name值 可以通過formData.append出來 sendData.append('icon',this.files[0]); $.ajax({ url:'./upload.php', data:sendData, type:'post', // 一定要加這兩句,不然會報錯 contentType: false, processData: false, success:function(backData){ // console.log(backData); //把返回的數據(是一個圖片路徑)設置給img的src屬性 $('img').attr('src',backData); } }) }) }) </script> 預覽結構跟上面是一樣的 PHP代碼: <?php header('content-type:text/html;charset=utf-8'); //接收什么,就返回什么數據 //保存文件格式 $fileName =iconv('utf-8','gbk',$_FILES['icon']['name']); //更改文件路徑 move_uploaded_file($_FILES['icon']['tmp_name'],'./icon/'.$fileName); //返回數據 echo './icon/'.$_FILES['icon']['name']; ?> 新建一個保存圖片的文件,icon??

轉載于:https://www.cnblogs.com/PinkYun/p/9152771.html

總結

以上是生活随笔為你收集整理的简单的实现图片预览, 通过原生ajax以及 jQuery两种方法实现图片预览,有更好的办法可以留言喔...................的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。