建议上传图像使用jQuery AJAX

我有一个具有3个输入端的一种形式：建议上传图像使用jQuery AJAX

[1]的状态更新文本输入字段

[2]的文件上传（为一个画面）

[3]用于附加链接的文本输入字段

用户在每个人之间切换，具体取决于他们想要做什么。例如，当选择[2]时，输入[1]和[3]被隐藏。

所有这些输入都包含在一个表单中，编号为posts_form。选项[1]和[3]通过Ajax发布到不同的控制器。

我现在的问题是选项[2]，因为它不可能使用jQuery ajax上传图像。

我见过的一些解决方案涉及到使用jQuery Form插件，但我想知道是否可以在不使用插件的情况下进行图片上传。

例如，这将是上传的代码基础，哪个当然不起作用。

$.ajax({ 
     url: 'chat/upload/' + <?php echo $page_id; ?>, 
     type: 'POST', 
     data: $('#posts_form').serialize(), 
     dataType: 'html', 
     beforeSend: function(){ 
       $('#loading').show(); 
      },   
     success: function(html) { 
      $('#attach').replaceWith(html); 
      $('#loading').hide(); 
      $('#posts_form input').val(''); 
      $('.posts_link').val(''); 
      $('#chat_input').hide(); 
      } 
     });

有什么建议可以添加/更改什么，以允许使用jQuery仅上传图片，而无需插件？

谢谢。

来源

2011-06-24 pepe

你最好的选择是这个插件。如果没有这个，你会浪费你的时间。

http://jquery.malsup.com/form/

来源

2011-06-24 00:32:38 jchavannes

有通过AJAX上传的文件没有直接的方法。这是HTML4的限制。解决方法是使用iframe或Flash。

在HTML5中，引入了File API来解决这个问题。下面是一个利用该API的演示（使用Firefox 3.6+），它允许您拖放图像并加载它，而无需将其发送回服务器：http://html5demos.com/file-api。它也支持多个文件：http://demos.hacks.mozilla.org/openweb/DnD/。

如果您热衷，您可以阅读that specification on W3.org。

如果你不能依赖于客户端具有浏览器支持HTML5的File API，您可以将卷您拥有或选择使用实现的iframe解决方法库：

来源

2011-06-24 02:18:31

thx @william - 我正在尝试jQuery窗体，但我遇到了触发提交的问题，因为我的按钮不是通过使用'input type = submit'呈现的 - [请参阅这里为我发布的新问题]（http：// stackoverflow .com/questions/6462730/how-to-trigger-submit-using-jquery-form-when-button-is-not-rendered-using-type-su） - 我还会检查你的其他解决方案 – pepe

建议上传图像使用jQuery AJAX

回答

相关问题