XML HP OS image end php代碼 append sda ext

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

　　結構:

　　　　<input type="file"> 　　　　　　<img src="" > 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

簡單的實現圖片預覽, 通過原生ajax以及 jQuery兩種方法實現圖片預覽,有更好的辦法可以留言喔................