使用FormData實現ajax文件異步上傳

時間 2021-05-06

標籤 javascript php html html5 java node jquery web json 後端欄目 Ajax 简体版

原文原文鏈接

可控的異步上傳javascript

1.傳統的web開發文件上傳通常是基於form表單的文件上傳，同步的方式，用戶體驗差，可控性也差php

2.異步上傳的實現有如下方式html

2.1 藉助瀏覽器插件通常須要安裝一些相似flash的插件這種方式缺點：須要安裝插件優勢：可控性強，性能高html5

2.2 這種是僞異步上傳，藉助表單向隱藏的iframe提交，而後經過iframe通訊操做當前頁面這種方式可控行查，體驗通常，見下面代碼java

2.3 藉助html5 裏的 FormData 對象，可實現進度控制，異步的上傳方式，見代碼node

iframe方式的僞異步上傳jquery

up.htmlweb

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">script>head><body><form method="post"  action="doup.php" enctype="multipart/form-data" target="up_file">
    姓名：<input name="user" type="text"><br>
    文件:<input type="file" name="ff"><br>
    <input type="submit" value="提交">form><iframe name="up_file" style="display: none">iframe><div id="res">div>body>html>

View Codejson

提交處理程序代碼 doup.php後端

<?phpif($_FILES){    $f=$_FILES['ff'];    $tmp_name=$f['tmp_name'];    if($f['error']===0){        if(is_uploaded_file($tmp_name)){            $file_arr=pathinfo($f['name']);            //防止特殊文件名
            if(!is_dir('./upfile')) mkdir('./upfile',0755);            $dst_file='./upfile/'.time()."-".substr(md5($file_arr['filename']),0,5).".".$file_arr['extension'];            $o=move_uploaded_file($tmp_name,$dst_file);            if($o){                $html=<<<E                 var parent=window.parent.document;                 var img="$dst_file' style='width:200px;height:200px;'>";
                $('#res',parent).html(img);                 " _ue_custom_node_="true">E;                echo $html;
            }else{                echo 0;
            }
        }
    }
}

後端處理

藉助FormData實現真的可控行異步上傳

up1.html

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js">script>head><body>
    文件:<input type="file" name="myfile" id="myfile"><br>
    <p id="upbtn">
        <input type="button" value="異步上傳" onclick="upload()">
        <span id="uptext" style="display: none">正在上傳span>
        <span id="tip">span>
        <button id="stopbtn" style="display: none">中止上傳button>
    p>
    <div id="res">div><script>
    function upload(){        var fd=new FormData();        var f=$("#myfile")[0].files[0];        if(typeof f !== "object") {
            alert('請先選擇文件！');            return false;
        }
        fd.append('myfile',f);        var xhr=new XMLHttpRequest();

        xhr.upload.onprogress=function(e){            if(e.lengthComputable){                var percent=Math.round((e.loaded*100/e.total));                console.log('%d',percent);
                $('#tip').text(percent);
            }
        }

        xhr.onloadstart=function(e){
            console.log("load start");
            $('#tip').text('開始上傳');

            $('#stopbtn').one('click',function(){
                xhr.abort();
                $(this).hide();
            });
            loading(true);

        }

        xhr.onload=function(e){            var res=xhr.responseText;            var res_arr=JSON.parse(res);
            console.log(res_arr);            if(res_arr.status==1){
                $('#tip').text('上傳成功');
                $('#res').html(res_arr.dst);
            }else{
                $('#tip').text(res_arr.info);
            }

        }

        xhr.onerror=function(){
            console.log('error');
            $('#tip').text('發生錯誤');
        }

        xhr.onloadend=function (e){
            console.log("load end");
            loading(false);
        }
        xhr.open("POST","./doup1.php",true);
        xhr.send(fd);
    }    function loading(showloading) {        if (showloading) {
            $("#uptxt").show();
            $("#stopbtn").show();
        } else {
            $("#uptxt").hide();
            $("#stopbtn").hide();
        }
    }script>body>html>

後端處理doup1.php

<?php$status=0;$arr=array('status'=>0,'info'=>'沒有文件上傳或上傳配置問題');if($_FILES){    $f=$_FILES['myfile'];    $tmp_name=$f['tmp_name'];    if($f['error']===0){        if(is_uploaded_file($tmp_name)){            $file_arr=pathinfo($f['name']);            if(!is_dir('./upfile')) mkdir('./upfile',0755);            $dst_file='./upfile/'.time()."-".substr(md5($file_arr['filename']),0,5).".".$file_arr['extension'];            $o=move_uploaded_file($tmp_name,$dst_file);            if($o){                $arr=array('dst'=>$dst_file,'status'=>1);
            }else{                $arr=array('status'=>0,'info'=>'移動文件失敗');
            }
        }
    }else{        $arr=array('status'=>0,'info'=>"up_err_code:".$f['error']);
    }
}echo json_encode($arr);