站長(zhǎng)資訊網(wǎng)
php怎么實(shí)現(xiàn)上傳圖片的功能
首先創(chuàng)建php腳本文件；然后使用“$_FILES”來獲取上傳的圖片；再調(diào)用“move_uploaded_file()”函數(shù)將圖片保存；最后在前端頁面創(chuàng)建表單將圖片提交過來即可。
前端：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文件上傳</title> </head> <body> <h1>文件上傳</h1> <div id="divPreview"> <img id="imgHeadPhoto" src="noperson.jpg" style="width: 160px; height: 170px; border: solid 1px #d2e2e2;" alt="" /> </div> <!--enctype 屬性規(guī)定在發(fā)送到服務(wù)器之前應(yīng)該如何對(duì)表單數(shù)據(jù)進(jìn)行編碼,"multipart/form-data"在使用包含文件上傳控件的表單時(shí)，必須使用該值。--> <form action="upload.php" method="post" enctype="multipart/form-data"> <!--file定義輸入字段和 "瀏覽"按鈕，供文件上傳。--> <input type="file" name="file" onchange="PreviewImage(this,'imgHeadPhoto','divPreview');" size="20" /> <input type="submit" value="上傳"/> </form> </body> <script type="text/javascript"> //js本地圖片預(yù)覽，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3 function PreviewImage(fileObj, imgPreviewId, divPreviewId) { var allowExtention = ".jpg,.bmp,.gif,.png"; //允許上傳文件的后綴名document.getElementById("hfAllowPicSuffix").value; var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase(); var browserVersion = window.navigator.userAgent.toUpperCase(); if (allowExtention.indexOf(extention) > -1) { if (fileObj.files) {//HTML5實(shí)現(xiàn)預(yù)覽，兼容chrome、火狐7+等 if (window.FileReader) { var reader = new FileReader(); reader.onload = function (e) { document.getElementById(imgPreviewId).setAttribute("src", e.target.result); } reader.readAsDataURL(fileObj.files[0]); } else if (browserVersion.indexOf("SAFARI") > -1) { alert("不支持Safari6.0以下瀏覽器的圖片預(yù)覽!"); } } else if (browserVersion.indexOf("MSIE") > -1) { if (browserVersion.indexOf("MSIE 6") > -1) {//ie6 document.getElementById(imgPreviewId).setAttribute("src", fileObj.value); } else {//ie[7-9] fileObj.select(); if (browserVersion.indexOf("MSIE 9") > -1) fileObj.blur(); //不加上document.selection.createRange().text在ie9會(huì)拒絕訪問 var newPreview = document.getElementById(divPreviewId + "New"); if (newPreview == null) { newPreview = document.createElement("div"); newPreview.setAttribute("id", divPreviewId + "New"); newPreview.style.width = document.getElementById(imgPreviewId).width + "px"; newPreview.style.height = document.getElementById(imgPreviewId).height + "px"; newPreview.style.border = "solid 1px #d2e2e2"; } newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')"; var tempDivPreview = document.getElementById(divPreviewId); tempDivPreview.parentNode.insertBefore(newPreview, tempDivPreview); tempDivPreview.style.display = "none"; } } else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox/([d.]+)/)[1]); if (firefoxVersion < 7) {//firefox7以下版本 document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[0].getAsDataURL()); } else {//firefox7.0+ document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[0])); } } else { document.getElementById(imgPreviewId).setAttribute("src", fileObj.value); } } else { alert("僅支持" + allowExtention + "為后綴名的文件!"); fileObj.value = ""; //清空選中文件 if (browserVersion.indexOf("MSIE") > -1) { fileObj.select(); document.selection.clear(); } fileObj.outerHTML = fileObj.outerHTML; } return fileObj.value; //返回路徑 } </script> </html>
后端：
<?php //var_dump($_FILES["file"]); //array(5) { ["name"]=> string(17) "56e79ea2e1418.jpg" ["type"]=> string(10) "image/jpeg" ["tmp_name"]=> string(43) "C:UsersasusAppDataLocalTempphpD07.tmp" ["error"]=> int(0) ["size"]=> int(454445) } //1.限制文件的類型，防止注入php或其他文件，提升安全 //2.限制文件的大小，減少內(nèi)存壓力 //3.防止文件名重復(fù)，提升用戶體驗(yàn) //方法一： 修改文件名 一般為:時(shí)間戳+隨機(jī)數(shù)+用戶名 // 方法二:建文件夾 //4.保存文件 //判斷上傳的文件是否出錯(cuò),是的話，返回錯(cuò)誤 if($_FILES["file"]["error"]) { echo $_FILES["file"]["error"]; } else { //沒有出錯(cuò) //加限制條件 //判斷上傳文件類型為png或jpg且大小不超過1024000B if(($_FILES["file"]["type"]=="image/png"||$_FILES["file"]["type"]=="image/jpeg")&&$_FILES["file"]["size"]<1024000) { //防止文件名重復(fù) $filename ="./img/".time().$_FILES["file"]["name"]; //轉(zhuǎn)碼，把utf-8轉(zhuǎn)成gb2312,返回轉(zhuǎn)換后的字符串， 或者在失敗時(shí)返回 FALSE。 $filename =iconv("UTF-8","gb2312",$filename); //檢查文件或目錄是否存在 if(file_exists($filename)) { echo"該文件已存在"; } else { //保存文件, move_uploaded_file 將上傳的文件移動(dòng)到新位置 move_uploaded_file($_FILES["file"]["tmp_name"],$filename);//將臨時(shí)地址移動(dòng)到指定地址 } } else { echo"文件類型不對(duì)"; } }
推薦教程：《PHP教程》
