不使用AJAX调整大小和上传文件
Resize and upload files without AJAX
编辑
这似乎是不可能的,因为画布和文件输入是不兼容的数据类型。
做类似事情的方法是使用"AJAX"发送AJAX请求;数据url";。我将对此进行更详细的研究。由于我不想使用AJAX,我会尝试将工作流伪装成更像普通的提交,即在最后刷新。
结束编辑
我想在没有AJAX的情况下调整和上传文件的大小,因为这是目前的工作方式(没有从手机/平板电脑上拍摄的调整大小的图像),而且在工作流程方面效果很好。
因此,在进行调整大小之后;图像";字段的值(如果可能的话)。
我正在使用这个库http://gokercebeci.com/dev/canvasresize为我调整大小。
我尝试将回调中的data
变量设置为file1输入的值,即
$("#file1").val(data);
但这引发了一个错误。我已经在下面的代码中删除了它,因为我很确定这不是解决问题的方法
我已经复制了下面的整个HTML/JS文件("图像上传"内容是使用AJAX上传图像的一个例子,我已经把它注释掉了,因为我不想这么做)。
<!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);
}
-->
在主窗口中创建一个回调函数。将iFrame添加到将处理文件上载的页面。上传文件后,使用文件名调用回调函数。将文件添加到画布中。
相关文章:
- 如何在php文件中获取$.post-ajax传递的值
- 在使用Polymer'加载所有json文件后执行方法;s的核心ajax
- 通过Ajax将JavaScript函数传递给PHP文件
- Ajax文件加载和<输入>文件加载
- 正在传递JSONP标头's数据参数到另一个文件中的AJAX请求
- 通过ajax到php文件获取单选按钮值
- 在样板文件中实现Ajax
- AJAX不会在文件上传后重定向到网页-POST方法
- 如何在 AJAX JQuQudy中对文件上传进行排队
- 使用ajax下载与存储名称不同名称的文件
- Ajax调用返回当前html页面,而不是请求的文件
- 在更改名称时,使用ajax jsp在下拉菜单中填充多个文件夹的数据
- AJAX上传文件不起作用
- 使用AJAX将文件上载到服务器
- 使用ajax上传的文件返回错误,但使用c#在asp.net的服务器端正常提交的文件
- AJAX在Django的外部JS文件中发布
- YUI向json文件发出ajax请求
- WebApp 读取文本文件 Ajax、HTTPrequest 或
- Magento:无法运行数据流配置文件:Ajax 错误(未捕获的类型错误:e 不是函数)
- 如何使用链接检索整个数据文件(ajax?)