在提交之前使用表单图像数据中的 Ajax答案

【问题标题】：Using Ajax from Form image data before submit在提交之前使用表单图像数据中的 Ajax
【发布时间】：2012-04-02 12:46:48
【问题描述】：

这是一个关于在非文本/字符串数据上使用 Ajax 的一般问题。

是否可以使用表单中的选定图像执行 JQuery Ajax POST 请求？这是在提交之前预览从表单输入中获取的已处理图像。图像被发布到服务器进行一些图像处理，并将返回 img html。

例如：

var img = $('#form').find('input:first, select:first').first(); // the image/file input
$.ajax({

type: "POST",
url: "photoprocess.php",
data: "{prephoto: '" + img+ "'}", // ??
contentType: "application/jpeg; charset=utf-8",
dataType: "text",
success: function (response) {
var imgHtml = response.d;
$('#preview').empty();

$('#preview').append(""+imgHtml);
},
......

如果需要插件，我应该选择哪一个？或者更好的表述：是否有一个您对此解决方案有很好经验的插件？

干杯。

【问题讨论】：

看看stackoverflow.com/questions/166221/… 有一些使用jQuery上传文件的解决方案
看来我得用插件了。

标签： jquery html ajax image forms

【解决方案1】：

TMHO 如果您在网站中显示图像（甚至是预览），则图像必须在服务器端，即使您想模拟预览方面也必须上传它（但您可以在异步方式只看AJAX上传解决方案）。

编辑：看看下面的 Steven 评论。现在这是可行的。

【讨论】：

是的，当我说 ajax POST 时；应该清楚我的意思是将它上传到我已经启动并运行的服务器。只需要 Jquery 详细信息即可。如果需要插件；这被认为是最好的或最好的。
抱歉，当您谈到“提交前预览”时，我误解了。搞的很乱，几周前我想快速实现一个这样的功能，我终于回到了基本的上传。
我正在使用另一个按钮（除了表单提交）来执行 ajax 操作，这就是我所说的“提交前预览”的意思。你试过uploadify还是plupload？
我试过 JQUploader 和 Uploadify（如果我没记错的话），我的问题是让它们与 Zend Framework 一起工作。
现在不是这样了。使用客户端JS，可以在上传前预览图片：codeforest.net/html5-image-upload-resize-and-crop

【解决方案2】：

没有标准的方法来做到这一点，因此使用一些随机插件或可疑的解决方法不是很好的做法。最终在服务器端解决了这个问题，主要是要求用户首先提交选择的照片，以便进行主题预览（服务器已经有原始图像的副本）和订购。

【讨论】：