コアコードのJQ PHPスライス大きなファイルのアップロード実装

フロント

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < タイトル>アップロード</ タイトル> 
    < スクリプトSRC = "https://cdn.bootcss.com/jquery/3.2 0.1 / jquery.min.js」> </ スクリプト> 
    < スタイル> 
        #jindu { 高さ：40ピクセル; 幅：0 ; 背景：＃666 ;：センター; 行の高さ：40ピクセル; 色：#FFF } 
    </ スタイル> 
</ ヘッド> 
< ボディ> 
    < 入力タイプ= "ファイル" 名= "ファイル" ID = "ファイル" > 
    < ボタンID = "アップロード" のonClick = "アップロード（）" >アップロード</ ボタン> 
    < DIV ID = "jindu" > </ DIV > 
    <</ P > 
    < スクリプトタイプ= "テキスト/ JavaScriptを" > 
        のvar bytesPerPiece =  1024  *  1024 * 4。; // 4メガバイトとして、各スライスファイルサイズ。
        ヴァールtotalPieces;
         VAR Jindu = のdocument.getElementById（" Jindu " ）;
 
        / / 送信要求
        機能アップロード（）{
             VARのBLOB = のdocument.getElementById（" ファイル" ）.files [ 0 ];
             VAR スタート=  0 ;
             VARのEND;
             VARのインデックス=  0 ;
             VAR ファイルサイズ= blob.size;
             VAR ファイル名= blob.name; 

            // ファイルのセクションの総数を計算
            totalPiecesを= Math.ceil（ファイルサイズ/ bytesPerPiece）;
             関数doup（）{ 
                終了= スタート+ bytesPerPiece;
                 VAR チャンク= blob.slice（開始、終了）; // 切断ファイル     
                VARFORMDATA =  新しいいるFormData（）; 
                formData.append（" ファイル" 、チャンク、ファイル名）; 
                formData.append（" インデックス" 、インデックス）; 
                $アヤックス（{ 
                    URL：' ./upload.php ' 、
                    種類：' POST ' 、
                    キャッシュ：偽、
                    データ：FORMDATA、
                    PROCESSDATA：偽、
                    contentTypeの：偽、
                    成功：関数（）{ 

                        開始= 終了。
                        もし（開始< ファイルサイズ）{ 
                             インデックス++ 。
                             VAR jindusize = （（インデックス+ 1 ）/ totalPieces）* 100。
                             jindu.style.width = jindusize + " ％" ; 
                             jindu.innerHTML = Math.floor（jindusize）+ " ％"; 
                            doup（）; 
                        } 他{ 
                            jindu.style.width = " 100％" 。
                            jindu.innerHTML =  " 100％" 。
                        } 
                        
                    } 
                }）。

           } 
           ）（doup。
        } 
    </ スクリプト> 
</ ボディ> 
</ HTML >

バックエンド

<？PHPの
 ヘッダ（「アクセス制御-許可起源：*」）;
ヘッダ（ "アクセス制御-許可-ヘッダ：起源、X-要求-では、Content-Typeのは、同意します" ）。
$ファイル = $ _FILES [ 'ファイル' ];
$ファイル名 = $ファイル [ '名' ]; 
ますfile_put_contents（ "./upload /"（mb_convert_encoding。$ファイル名を "GBK"、 "UTF-8"）、のfile_get_contents（$ファイル [ 'tmp_name']）、FILE_APPEND）は、

コードの唯一のコア機能は、完璧ではない、我々は独自のビジネス用途に応じて変更する必要があります

コアコードのJQ PHPスライス大きなファイルのアップロード実装

おすすめ