HTML5 文件域+FileReader 读取文件并上传到服务器(三)

╰半橙微兮° 2024-02-18 21:24 38阅读 0赞

**一、读取文件为blob并上传到服务器**

HTML

![复制代码][copycode.gif]

//读取图片实例,并上传到服务器
    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);
        }
    }

![复制代码][copycode.gif]

后台C\#处理关键代码：

![复制代码][copycode.gif]

//接收文件
    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;

![复制代码][copycode.gif]

二、读取图片文件，并上传到服务器

HTML

![复制代码][copycode.gif]

<div class="container">
        
        <input type="file" id="file" accept="image/*" />
        <input type="button" id="btn1" value="点击上传" onclick="uploadClick();" />
        <h4>选择文件如下:</h4>
        <img src="" id="img1" />
    </div>

![复制代码][copycode.gif]

JS：

![复制代码][copycode.gif]

//读取图片实例,并上传到服务器
    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)
        }
    }

![复制代码][copycode.gif]

后台关键代码处理同上。

[copycode.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/e55ab3664c134283b929ce592be68e6a.png