Question

我有一个允许用户选择图像的按钮 - 如下所示：

        <div id="fileUpload">
          <form id="joinPhotoUploadForm" method="POST" enctype="multipart/form-data">
            <input type="file" id="file"/>
          </form>
          <div id="fakefile">
            <img src="../../images/button-grey-enhanced.png" id="usePhotoSubmit" alt="BROWSE for Photo">
            <span id="usePhoto">BROWSE</span>
          </div>
        </div>

然后我需要将图像上传到服务器并在同一页面上显示图像而不刷新页面。我尝试了以下内容：

$('input#file').change(function() {
  $('form#joinPhotoUploadForm').submit();
});

有关如何在不刷新页面的情况下将图像上传并显示在同一页面上的任何建议吗？

THX

Answer 1

您可以使用现代浏览器中提供的FileReader和File API在上传之前读取文件客户端并显示预览，然后在用户验证预览后允许用户上传。您还可以使用图像从桌面拖放到浏览器而不是传统的文件选择输入。

以下是它的教程：http://www.html5rocks.com/en/tutorials/file/dndfiles/

在较旧的浏览器中，您可以通过页面重新加载回退到传统的文件输入。

Answer 2

您是否考虑过像Uploadify或Pupload这样的花哨上传者？

Answer 3

您可以尝试本教程中提供的解决方案 http://www.youtube.com/course?list=EC7C25B2F18F68F3EF&feature=plcp

上传图片没有页面刷新＆amp;然后显示图像

3 个答案: