HTML5 でのファイルアップロードのコード-H5 チュートリアル-php.cn

HTML5 でのファイルアップロードのコード

不言

リリース： 2018-08-06 17:44:43

オリジナル

5286 人が閲覧しました

この記事では、HTML5 でファイルをアップロードするためのコードを紹介します。必要な方は参考にしていただければ幸いです。

FileUpload.php

<input type="file" onchange="handleUpload()">

ログイン後にコピー

インターフェース呼び出し upload.php:

function handleUpload(){
    var file = document.querySelector(&#39;input[type=file]&#39;).files[0];    
    if(!!file) {        
    var reader = new FileReader();        // 读取文件二进制
        reader.readAsArrayBuffer(file);
        reader.onload = function() {
            upload(this.result, file.name);
        }
    }
}function upload(binary, filename){
    var xhr = new XMLHttpRequest();    // 通过post发送二进制数据，文件信息拼接在url
    xhr.open(&#39;POST&#39;, &#39;./upload.php?filename=&#39; + filename);
    xhr.overrideMimeType("application/octet-stream");    
    if(xhr.sendAsBinary) {
        xhr.sendAsBinary(binary);
    }else {
        xhr.send(binary);
    }

    xhr.onload = function() {
        var res = JSON.parse(xhr.response);        
        if(res.status === &#39;success&#39;) {
            alert(&#39;上传成功&#39;);
        }else {
            alert(&#39;上传失败&#39;);
        }
    }
}

ログイン後にコピー

おすすめ関連記事:

css box-sizing 属性(ボックスモデル) 使い方紹介

HTML5のビデオ(video)要素の解析

FileUpload.php

<?php
$result = new stdClass();
$fileName = $_GET[&#39;filename&#39;];
$filePath = &#39;./document/&#39;;
function binary_to_file($fileName){
    // 获取二进制数据
    $content = file_get_contents(&#39;php://input&#39;);    
    if(empty($content)) {        
    $content = $GLOBALS[&#39;HTTP_RAW_POST_DATA&#39;];
    }    
    $res = file_put_contents($GLOBALS[&#39;filePath&#39;] . $fileName, $content, true);    
    return $res;
}if(binary_to_file($fileName) === FALSE) {    
$result->status = &#39;error&#39;;
}else {    
$result->status = &#39;success&#39;;
}echo json_encode($result);

ログイン後にコピー

接口调用upload.phpルービックキューブゲームを実装するHTML5コード

以上がHTML5 でのファイルアップロードのコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。