利用ajax+php實現檔案上傳

理論上來說此類的檔案/圖片上傳外掛程式已經很多了，但是在使用的過程中還是會遇到各種各樣的問題，，相容問題、後台問題~~等等，所以既然別人的輪子我用不好，那就自己動手造一個吧。

本文中使用jq.ajax和php實現上傳功能，前端代碼一般無差，有的小夥伴後台不是php的，請參考貴語言的文檔進行操作即可。

先看一下，整個上傳介面大概是這樣的：查看demo

整體思路：

1、建立input設定type=file，id=file，樣式設定opacity:0，position:absolute

2、建立一個遮罩層，並設定position:absolute並且z-index大於file

3、建立FormData對象，把file放到FormData中做為資料

4、建立ajax，發送FormData資料到upload.php，監聽ajax的progress事件，即時返回上傳進度

5、在html頁面輸出伺服器的響應

6、上傳完成之後，點擊“繼續上傳”按鈕，開啟檔案選擇框，可繼續上傳。

HTML部分，比較簡單：

<p class="upload"> <p class="uploadBox">    <span class="inputCover">選擇檔案</span><form enctype="">    <input type="file" name="file" id="file" />    <button type="button" class="submit">上傳</button></form><button type="button" class="upagain">繼續上傳</button><span class="processBar"></span><span class="processNum">未選擇檔案</span>    </p></p>

CSS，樣式可以根據個人喜好自由調整，這裡僅供參考：

*{    font-family: 'microsoft yahei';    color: #4A4A4A;}.upload{    width: 700px;    padding: 20px;    border: 1px dashed #ccc;    margin: 100px auto;    border-radius: 5px;}.uploadBox{    width: 100%;    height: 35px;    position: relative;}.uploadBox input{    width: 200px;    height: 30px;    background: red;    position: absolute;    top: 2px;    left: 0;    z-index: 201;    opacity: 0;    cursor: pointer;}.uploadBox .inputCover{    width: 200px;    height: 30px;    position: absolute;    top: 2px;    left: 0;    z-index: 200;    text-align: center;    line-height: 30px;    font-size: 14px;    border: 1px solid #009393;    border-radius: 5px;    cursor: pointer;}.uploadBox button.submit{    width: 100px;    height: 30px;    position: absolute;    left: 230px;    top: 2px;    border-radius: 5px;    border: 1px solid #ccc;    background: #F0F0F0;    outline: none;    cursor: pointer;}.uploadBox button.submit:hover{    background: #E0E0E0;}.uploadBox button.upagain{    width: 100px;    height: 30px;    position: absolute;    left: 340px;    top: 2px;    display: none;    border-radius: 5px;    border: 1px solid #ccc;    background: #F0F0F0;    outline: none;    cursor: pointer;}.uploadBox button.upagain:hover{    background: #E0E0E0;}.processBar{    display: inline-block;    width: 0;    height: 7px;    position: absolute;    left: 500px;    top: 14px;    background: #009393;}.processNum{    position: absolute;    left: 620px;    color: #009393;    font-size: 12px;    line-height: 35px;}

JS部分，jq.ajax：

$(document).ready(function(){    var inputCover = $(".inputCover");    var processNum = $(".processNum");    var processBar = $(".processBar");    //上傳準備資訊    $("#file").change(function(){        var file = document.getElementById('file');        var fileName = file.files[0].name;var fileSize = file.files[0].size;        processBar.css("width",0);         //驗證要上傳的檔案if(fileSize > 1024*2*1024){    inputCover.html("<font>檔案過大，請重新選擇</font>");    processNum.html('未選擇檔案');    document.getElementById('file').value = '';    return false;}else{    inputCover.html(fileName+' / '+parseInt(fileSize/1024)+'K');    processNum.html('等待上傳');}    })    //提交驗證    $(".submit").click(function(){if($("#file").val() == ''){            alert('請先選擇檔案！');}else{    upload();}    })    //建立ajax對象，發送上傳請求    function upload(){        var file = document.getElementById('file').files[0];var form = new FormData();form.append('myfile',file);$.ajax({    url: 'upload.php',//上傳地址    async: true,//非同步    type: 'post',//post方式    data: form,//FormData資料    processData: false,//不處理資料流 !important     contentType: false,//不設定http頭 !important     xhr:function(){//擷取上傳進度                            myXhr = $.ajaxSettings.xhr();                if(myXhr.upload){                    myXhr.upload.addEventListener('progress',function(e){//監聽progress事件                    var loaded = e.loaded;//已上傳                        var total = e.total;//總大小                        var percent = Math.floor(100*loaded/total);//百分比                        processNum.text(percent+"%");//數顯進度                        processBar.css("width",percent+"px");//圖顯進度}, false);                }                return myXhr;            },     success: function(data){//上傳成功回調 console.log("文檔當前位置是："+data);//擷取檔案連結 document.cookie = "url="+data;//此行可忽略 $(".submit").text('上傳成功'); $(".upagain").css("display","block");             }})    }    //繼續上傳    $(".upagain").click(function(){$("#file").click();processNum.html('未選擇檔案');        processBar.css("width",0);         $(".submit").text('上傳');document.getElementById('file').value = '';$(this).css("display","none");    })})

上傳完畢，upload.php處理檔案（為了伺服器安全，僅貼出程式碼片段）：

<?php  if(isset($_FILES["myfile"])){      move_uploaded_file($_FILES["myfile"]["tmp_name"],"ajax/".$_FILES["myfile"]["name"]);    echo "http://www.xuxiangbo.com/ajax/".$_FILES["myfile"]["name"];}else{    echo 'no file';}?>

轉自部落格

作者：Imin

連結：http://blog.xuxiangbo.com/im-22.html

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

PHP+sftp 實現檔案的上傳與下載

四種php隨機字產生符串的方法