HTML5 文件域+FileReader 讀取文件並上傳到服務器(三)

一、讀取文件為blob並上傳到服務器

HTML

<div class="container">
    <!--讀取要上傳的文件-->
    <input type="file" id="file"  />
    <input type="button" id="btn1" value="點擊上傳" onclick="uploadClick();" />
</div>

JS

//讀取圖片實例,並上傳到服務器
var fileBox = document.getElementById('file');
fileBox.onchange = function () {
    //獲取選擇文件的數組
    var fileList = fileBox.files;
    for (var i = 0; i < fileList.length; i++) {
        var file = fileList[i];
        uploadFile(file);
    }
}
//關鍵代碼上傳到服務器
function uploadFile(file) {
    var reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = function () {
        var blob = new Blob([reader.result]);
        //提交到服務器
        var fd = new FormData();
        fd.append('file', blob);
        var ext = file.name.substring(file.name.lastIndexOf('.'));
        fd.append('extention', ext);
        fd.append('maxsize', 1024*1024*4);//Asp.net 默認一次上傳最大4MB
        fd.append('isClip', -1);
        var xhr = new XMLHttpRequest();
        xhr.open('post', '../ashx/upload.ashx', true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var data = eval('(' + xhr.responseText + ')');
                console.info(data);
                if (data.success) {
                    //上傳成功
                    var imgName = data.msg;
                    alert(imgName);
                } else {
                    alert(data.msg);
                }
            }
        }
        //開始發送
        xhr.send(fd);
    }
}

后台C#處理關鍵代碼：

//接收文件
HttpRequest req = _Context.Request;
string newname = _fileInfo.CreateNewName(newExtention);
//接收二級制數據並保存
Stream stream = _PostedFile.InputStream;
byte[] dataOne = new byte[stream.Length];
stream.Read(dataOne, 0, dataOne.Length);
FileStream fs = new FileStream(_fileInfo.TempFile + newname, FileMode.Create, FileAccess.Write);
try
{
    fs.Write(dataOne, 0, dataOne.Length);
}
finally
{
    fs.Close();
    stream.Close();
}
return newname;

二、讀取圖片文件，並上傳到服務器

HTML

<div class="container">
    <!--圖片類型驗證方法1-->
    <input type="file" id="file" accept="image/*" />
    <input type="button" id="btn1" value="點擊上傳" onclick="uploadClick();" />
    <h4>選擇文件如下:</h4>
    <img src="" id="img1" />
</div>

JS：

//讀取圖片實例,並上傳到服務器
var fileBox = document.getElementById('file');
fileBox.onchange = function () {
    //獲取選擇文件的數組
    var fileList = fileBox.files;
    for (var i = 0; i < fileList.length; i++) {
        var file = fileList[i];
        //圖片類型驗證第二種方式
        if (/image\/\w+/.test(file.type))
            readFile(file);
        else
            console.log(file.name + ':不是圖片');
    }
}
//讀取二進制圖片文件，並上傳到服務器
function uploadClick() {
    var fileList = fileBox.files;
    for (var i = 0; i < fileList.length; i++) {
        var file = fileList[i];
        //圖片類型驗證第二種方式
        if (/image\/\w+/.test(file.type))
            uploadFile(file);
        else
            console.log(file.name + ':不是圖片');
    }
}
//關鍵代碼上傳到服務器
function uploadFile(file) {
    var reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = function () {
        var blob = new Blob([reader.result], { type: 'image/jpg' });
        //提交到服務器
        var fd = new FormData();
        fd.append('file', blob);
        var ext = file.name.substring(file.name.lastIndexOf('.'));
        fd.append('extention', ext);
        fd.append('isClip', -1);
        var xhr = new XMLHttpRequest();
        xhr.open('post', '../ashx/upload.ashx', true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var data = eval('(' + xhr.responseText + ')');
                console.info(data);
                if (data.success) {
                    //上傳成功
                    var imgName = data.msg;
                    alert(imgName);
                } else {
                    alert(data.msg);
                }
            }
        }
        //開始發送
        xhr.send(fd);
    }
}
//讀取圖片內容 為DataURL
function readFile(file) {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function (e) {
        var result = reader.result;
        $('.container blockquote').text(result);
        $('#img1').attr('src', result)
    }
}

 后台關鍵代碼處理同上。

讀取文件二：http://www.cnblogs.com/tianma3798/p/5839791.html

讀取文件一：http://www.cnblogs.com/tianma3798/p/4355949.html