runsly CSS+DIV 2021-07-19

向服务器端发送Blob对象

在HTML 5中，可以通过XML HttpRequest对象的send方法向服务器端发送Blob对象，因为所有File对象（代表一个文件）都是一个Blob对象，所以同样可以通过发送Blob对象的方法来上传文件。

<h1>向服务器端发送Blob对象</h1>
<input type="button" value="复制页面文件" onclick="uploadDocument()"><br/>
<progress min="0" max="100" value="0" id="progress"></progress>
<output id="result"/>

window.URL = window.URL || window.webkitURL;
// 复制当前页面
function uploadDocument(){
        var bb= new Blob([document.documentElement.outerHTML]);
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'test.php?fileName='+getFileName(), true);
        var progressBar = document.getElementById('progress');
        xhr.upload.onprogress = function(e) {
            if (e.lengthComputable) {
                progressBar.value = (e.loaded / e.total) *100;
                document.getElementById("result").innerHTML = '已完成进度:'+
                progressBar.value+'%';
            }
        }
    xhr.send(bb);
}
// 获取当前页面文件的文件名
function  getFileName(){
    var   url=window.location.href;
    var   pos=url.lastIndexOf("\\");
    if   (pos==-1)                               // pos==-1表示为本地文件
        pos=url.lastIndexOf("/");                // 本地文件路径分割符为"/"
    var   fileName=url.substring(pos+1);         // 从url中获得文件名
    return fileName;
}

<?
$str =file_get_contents('php:// input');
$fileName='副本_'.$_REQUEST['fileName'];
$fp = fopen(iconv("UTF-8","GBK",$fileName),'w');
fwrite($fp,$str);
fclose($fp);                                     // 关闭文件
?>

HTML/CSS