使用Jquery上传图像

时间:2013-02-16 19:58:08

标签: jquery file-upload xmlhttprequest

我可以使用像这样的html表单将图像成功上传到服务器:

<form id="upload_form" action="/upload" enctype="multipart/form-data" method="post">
  <p><input name="image_name" placeholder="Enter Tile Name"></p>
  <p>
     <input name="image_url" type="file">
     <input id='submit' type="submit" value="Upload">
  </p>
</form>

如何使用jQuery以编程方式执行完全相同的操作?

更新

好的,所以我已经了解了新的XMLHttpRequest 2和formData函数,并写了这个:

image_name = $('#image_name').val()
formData = new FormData()
formData.append('image_name', image_name)
formData.append('bts_spriteSheet', @bts_spritesheet)

xhr = new XMLHttpRequest()
xhr.open('POST', '/upload', true)
xhr.onload = (e) =>
   console.log 'yay its done'
xhr.send(formData)

@bts_spritesheet是使用如下文件选择器获得的:

handleSpritesheetSelection = (evt) => 
      files = evt.target.files
      f = files[0]
      reader = new FileReader()

      # Closure to capture the file information.
      reader.onload = ((theFile) =>
        return (e) => 
          @bts_spritesheet = e.target.result   
        )(f)
      reader.readAsDataURL(f)
document.getElementById('upload_spritesheet').addEventListener('change', handleSpritesheetSelection, false)

问题

我的CoffeeScript代码返回Servor 500错误。但是如果工作正常,可以在这个问题的开头使用html表单。

0 个答案:

没有答案