0

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

        <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();
});

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

谢谢

4

3 回答 3

1

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

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

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

于 2012-09-08T00:31:35.137 回答
0

您是否考虑过像Uploadify或Pupload这样的精美上传器？

于 2012-09-08T00:27:58.633 回答
0

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

于 2012-09-08T00:34:34.753 回答