通过jQuery AJAX上传图片

我环顾四周，找不到我要找的东西没有附加插件/库。我想通过JQuery AJAX上传图片并通过服务器端处理，但我无法弄清楚如何传递和处理它。任何帮助深表感谢！通过jQuery AJAX上传图片

来源

2013-10-09 J S

它是否必须是jQuery或AJAX？我会推荐node.js这样的事情。 –

创建'

AJAX本身不支持二进制文件传输。您需要对其进行base-64编码，在AJAX调用中将其作为文本块发送，在服务器上解码并将其保存为二进制文件。你想自己写所有的东西 - 继续。 –

虽然Diodeus是正确的，但它并不那么困难。只是疯狂。

HTML5确实公开了所谓的FileReader API，它在传统浏览器上仍然相对较新且不受支持，但这会使您的工作更轻松。我有一个小应用程序，它接受客户端的图像，并使用FileReader API将它们转换为base-64上传到服务器。

以下是我要求用户上传图像的功能。 App.FileReader是HTML5的FileReader，它被声明只是想的一个实例：

App.FileReader = window.FileReader ? new FileReader : null;

一旦上传，读取的图像与使用的FileReader一个dataURL，并且将数据推入的未使用的标记。 FileReader本身保留读取的数据，这就是为什么一次只实例化一个FileReader是个好主意。

if (input.files && input.files[0]) { 

     if (App.FileReader) { 

      App.FileReader.onload = function (e) { 
       $('#createMomentImagePreview').attr('src', e.target.result); 
      } 

      App.FileReader.readAsDataURL(input.files[0]); 

      $this.uploadedImage = true 
     } 

     else { 
      $('#createMomentImagePreview').attr('src', 'http://d33w6ffaa49e6z.cloudfront.net/media/ImageLoaded.png'); 

      $this.uploadedImage = true 
     } 
    }

这是AJAX调用上传到服务器，数据表示读取文件，或“App.FileReader.result”：

$.ajax({ 
     url: '/image', 
     type: 'POST', 
     data: { 
      image: App.FileReader.result 
     } 
    }).done(function(data){ 

     callback(data); 

    }).fail(function() { 
     console.log("Image upload failed!") 
     alert("Sorry, there was an error uploading your image to the database.") 
    })

服务器端（和我使用使用Express的节点，所以这可能不适用），我可以将base64字符串转换为一个缓冲区（Blob），并使用Knox的putBuffer将其发送到S3。这比用S3实际验证要简单得多，并且试图让它与你的二进制数据一起玩。

if (req.body.image.match(/^data:image\/png;base64,/)) { 
    var image = new Buffer(req.body.image.replace(/^data:image\/png;base64,/,""), "base64"); 
} 

else if (req.body.image.match(/^data:image\/jpeg;base64,/)) { 
    var image = new Buffer(req.body.image.replace(/^data:image\/jpeg;base64,/,""), "base64"); 
} 

awsClient.putBuffer(image, '/' + imagePath + '.jpg', headers, function(err, stream) { 

      if (err) { 
      console.log(err); 
      return false 
      } 

      res.send(200, imagePath + '.jpg') 

      image = null; 

     });

在这两种情况下，一旦你的服务器上有base64数据，你就取得了很大的进步。您也可以使用ImageMagick来处理处理。对于它的价值，我希望这能以某种方式帮助你！

来源

2013-10-09 22:10:22

非常感谢回复！我实际上已经在使用FileReader，所以这可能会派上用场。现在我正在尝试一个隐藏的IFrame，它会将JavaScript变量传递回父窗口来表示成功（或缺少），并且不明白为什么它不起作用。如果没有，我一定会仔细看看你的解决方案。再次感谢！ –

没问题！嗯...我应该认为在文件输入中使用$ .change（）事件可能是更好的方法。只有在文件上传成功的情况下才会触发它，并且它的功能就像是一个启动我的应用程序的魅力。 –

通过jQuery AJAX上传图片

回答

相关问题