使用.ajaxform发送blob [英] sending blobs using .ajaxform

查看:88
本文介绍了使用.ajaxform发送blob的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经写了一段用于文件上传的javascript,它运行良好,但我希望能够将文件切片到blob并将blob而不是整个文件发送到服务器()我知道hpoe接收blob在服务器上并附加所有blob但我不知道如何在myscript.js中嵌入这段代码



我想在这里发送blob

I have written a piece of javascript for file upload and it is working well, but I want to be able to slice files to blobs and send the blobs instead of the whole file to the server() I know hpoe to receive the blobs on the server and append all the blobs but I do not know how to embed this piece of code in myscript.js

I want to send the blobs here

$('form').ajaxForm({
                url: "UploadHandler.ashx",
                type: "POST",
                contentType: false,
                processData: false,





这块代码切片文件并将其推入





this piece of code slice the file and push it into

var blobs = [];
var fl = document.getElementById("files");
var L = fl.files.length;

for (var i = 0; i < L ; i++) {
     var file = fl.files[i];
     var bytes_per_chunk = 1024 * 1024; //1048576
     var start = 0;
     var end = bytes_per_chunk;
     var size = file.size;
     var j = bytes_per_chunk;
     while (start < size) {
         //push the fragments to an array
         blobs.push(file.slice(start, end));
         start = j;
         j = start + bytes_per_chunk;;
         end = start + bytes_per_chunk;
         if (end > size) {
             end = size;
         }
     }





myscript.js





myscript.js

$(document).ready(function () {
    $("#btnUpload").click(function (evt) {
        /* variables */
        var blobs = [];
        var status = $('.status');
        var percent = $('.percent');
        var bar = $('.bar');

        $('form').ajaxForm({
            url: "UploadHandler.ashx",
            type: "POST",
            contentType: false,
            processData: false,

            /* reset before submitting */
            beforeSend: function () {
                status.fadeOut();
                bar.width('0%');
                percent.html('0%');
            },

            /* progress bar call back*/
            uploadProgress: function (event, position, total, percentComplete) {
                var pVel = percentComplete + '%';
                bar.width(pVel);
                percent.html(pVel);
            },

            /* complete call back */
            complete: function (data) {
                status.html(data.responseText).fadeIn().fadeOut(9600);
            },

            success: function (result) {
                alert(result);
            },
            error: function (e) {
                var msg = '';

                switch (e.code) {
                    case FileError.QUOTA_EXCEEDED_ERR:
                        msg = 'QUOTA_EXCEEDED_ERR';
                        break;
                    case FileError.NOT_FOUND_ERR:
                        msg = 'NOT_FOUND_ERR';
                        break;
                    case FileError.SECURITY_ERR:
                        msg = 'SECURITY_ERR';
                        break;
                    case FileError.INVALID_MODIFICATION_ERR:
                        msg = 'INVALID_MODIFICATION_ERR';
                        break;
                    case FileError.INVALID_STATE_ERR:
                        msg = 'INVALID_STATE_ERR';
                        break;
                    default:
                        msg = 'Unknown Error';
                        break;
                };
                alert('Error: ' + msg);
            }

        });

    });
});





和tis是我的aspx文件





and tis is my aspx file

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>uploading file using jquery with generic handler ashx</title>
    <link id="Link1" rel="stylesheet" runat="server" media="screen" href="~/Style/fileupload.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>
    <script src="myscript.js" ></script>

</head>

<body>
    <form id="form1" runat="server" enctype="multipart/form-data">
        <div>
            <div class="fileuploadDiv">
                <div class="status"></div>
                <h3></h3>
                <br /><br />
                <input type="file" name="files[]" multiple="multiple" id="files" class="fileSelect" />
                <input type="submit" value="Upload" class="button" id="btnUpload" />
                <div id="messages"></div>
                <div class="progress">
                    <div class="bar"></div>
                    <div class="percent">0%</div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

推荐答案

' form')。ajaxForm({
url: UploadHandler.ashx
type: POST
contentType: false
processData: false
('form').ajaxForm({ url: "UploadHandler.ashx", type: "POST", contentType: false, processData: false,





这段代码切片文件并将其推入





this piece of code slice the file and push it into

var blobs = [];
var fl = document.getElementById("files");
var L = fl.files.length;

for (var i = 0; i < L ; i++) {
     var file = fl.files[i];
     var bytes_per_chunk = 1024 * 1024; //1048576
     var start = 0;
     var end = bytes_per_chunk;
     var size = file.size;
     var j = bytes_per_chunk;
     while (start < size) {
         //push the fragments to an array
         blobs.push(file.slice(start, end));
         start = j;
         j = start + bytes_per_chunk;;
         end = start + bytes_per_chunk;
         if (end > size) {
             end = size;
         }
     }





myscript.js





myscript.js


(document).ready(function(){
(document).ready(function () {


#btnUpload)。click(function(evt){
/ * 变量* /
var blobs = [];
< span class =code-keyword> var status =
("#btnUpload").click(function (evt) { /* variables */ var blobs = []; var status =


这篇关于使用.ajaxform发送blob的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆