Javascript 不使用AJAX调整文件大小并上载文件编辑_Javascript_Jquery_Canvas_Upload

Javascript 不使用AJAX调整文件大小并上载文件编辑

javascript jquery canvas

Javascript 不使用AJAX调整文件大小并上载文件编辑,javascript,jquery,canvas,upload,Javascript,Jquery,Canvas,Upload,看起来这很可能是不可能的，因为画布和文件输入是不兼容的数据类型执行类似操作的方法是使用“数据url”发送AJAX请求。我将更详细地研究这一点。因为我不想使用AJAX，所以我会尝试将工作流伪装成更像正常的提交，即在最后刷新结束编辑我想在不使用AJAX的情况下调整和上传文件的大小，因为这是目前正在进行的工作（没有调整大小的图像-从手机/平板电脑上拍摄），并且它在工作流方面运行良好因此，在进行调整大小后，如果可能的话，我希望能够使调整大小的“图像”成为字段的值我正在使用这个库为我调整大小我

看起来这很可能是不可能的，因为画布和文件输入是不兼容的数据类型

执行类似操作的方法是使用“数据url”发送AJAX请求。我将更详细地研究这一点。因为我不想使用AJAX，所以我会尝试将工作流伪装成更像正常的提交，即在最后刷新

结束编辑我想在不使用AJAX的情况下调整和上传文件的大小，因为这是目前正在进行的工作（没有调整大小的图像-从手机/平板电脑上拍摄），并且它在工作流方面运行良好

因此，在进行调整大小后，如果可能的话，我希望能够使调整大小的“图像”成为字段的值

我正在使用这个库为我调整大小

我尝试将回调中的

data

变量设置为file1输入的值，即

$("#file1").val(data);

但这带来了一个错误。我已经在下面的代码中删除了它，因为我非常确定这不是解决问题的方法

我复制了下面的整个HTML/JS文件（“图像上传”内容是使用AJAX上传图像的一个例子，我已经注释掉了，因为我不想这样做）


调整大小并上传图像
拉票

$（）.ready（函数（））{
$（'input[name=file1]'）。更改（函数（e）{
var file=e.target.files[0]；
//重置
$（'#area p span'）.css（'width'，0+“%”）html（“”）；
$（“#区域img，#区域画布”）.remove（）；
$（'#area i'）.html（JSON.stringify（e.target.files[0]）。替换（/，/g，，
）；
//画布大小调整
拉票（文件）{
宽度：600，
高度:0,，
作物：假，
质量：80，
回调：函数（数据、宽度、高度）{
//显示为图像
// =================================================
var img=新图像（）；
img.onload=函数（）{
$（this.css）({
“边距”：“10px自动”，
“宽度”：宽度，
“高度”：高度
}).附于（“#区域分区”）；
};
///显示为图像
// =================================================
$（img）.attr（'src'，数据）；
}
});
});
});
在主窗口中创建回调函数。向将处理文件上载的页面添加iFrame。上传文件后，使用文件名调用回调函数。将文件添加到画布
<!DOCTYPE html>
<html>
<head>
    <title>Resize and Upload Images</title>
    <script type="text/javascript" src="/public/javascripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/public/javascripts/zepto.min.js"></script>
    <script type="text/javascript" src="/public/javascripts/jquery.exif.js"></script>
    <script type="text/javascript" src="/public/javascripts/jquery.canvasResize.js"></script>
    <script type="text/javascript" src="/public/javascripts/binaryajax.js"></script>
    <script type="text/javascript" src="/public/javascripts/canvasResize.js"></script>
    <script type="text/javascript" src="/public/javascripts/exif.js"></script>

</head>
<body style="margin:48px;">
<div id="devcontainer">
    <div id="area">
        <h3>canvasResize</h3>
        <div>
            <form action="/upload" enctype="multipart/form-data" method="POST">
            <input name="file1" type="file" id="file1"/>
            <input name="file1" type="file"/>
            <input name="data1" type="text"/>
            <input name="data2" type="text"/>
            </form>
            <p><span></span></p>
            <i></i>
        </div>
        <script>
        $().ready(function() {

            $('input[name=file1]').change(function(e) {
            var file = e.target.files[0];

            // RESET
            $('#area p span').css('width', 0 + "%").html('');
            $('#area img, #area canvas').remove();
            $('#area i').html(JSON.stringify(e.target.files[0]).replace(/,/g, ", <br/>"));

            // CANVAS RESIZING
            canvasResize(file, {
                width: 600,
                height: 0,
                crop: false,
                quality: 80,
                callback: function(data, width, height) {

                // SHOW AS AN IMAGE
                // =================================================
                var img = new Image();
                img.onload = function() {

                $(this).css({
                    'margin': '10px auto',
                    'width': width,
                    'height': height
                }).appendTo('#area div');
            };

            // /SHOW AS AN IMAGE
            // =================================================
            $(img).attr('src', data);

                }
            });
            });

        });
        </script>
    </div>
    <div class="clearfix"></div>
</div>
</body>
</html>
<!--
   // IMAGE UPLOADING
                // =================================================

                // Create a new formdata
                var fd = new FormData();
                // Add file data
                var f = canvasResize('dataURLtoBlob', data);
                f.name = file.name;
                fd.append($('#area input').attr('name'), f);

                var xhr = new XMLHttpRequest();
                var loaded = Math.ceil((e.loaded / e.total) * 100);
                $('#area p span').css({'width': loaded + "%"}).html(loaded + "%");
                }
                }, false);
                // File uploaded
                xhr.addEventListener("load", function(e)
                {
                var response = JSON.parse(e.target.responseText);
                if (response.filename)
                {
                    // Complete
                    $('#area p span').html('done');
                    $('#area b').html(response.filename);
                    $('<img>').attr({
                    'src': response.filename
                    }).appendTo($('#area div'));
                }
                }, false);
                // Send data
                xhr.send(fd);

                }


-->