通过动态加载上传jQuery图像

Question

我有一个图像表单我想上传我的图像用于商店页面。只需单击它，显示上传框，然后在选择图像时自动提交并用新上传的项目替换一个图像。

这是当前的页面布局，没有实际的上传按钮。点击图片，我们将在用户PC上显示上传窗口：

这是HTML字段中突出显示区域的代码

<div class="uploader">
    <form method="POST" id="upload_image">
        <img src="/img/upload.png" id="imageUpload" alt="upload" />
    </form>
</div>

因此，一旦表单提交，使用Ajax请求，当它返回并成功时，我计划将图像名称（通常是当前time()作为文件名）存储为会话变量，现在我需要显示一个上传过程发生时Loading...图像，然后将imageUpload替换为/img/thumbs/NEWIMAGENAMEHERE.png中的新图片。

提问时间 是否有一个jQuery函数，我可以使用它来加载图像和加载图像，然后上传完成后加载的图像？是否有像这样的SINGLE图像上传的jquery库？所有图书馆我找到了多个图片的工作，因为我们只支持这个商店布局上的一个图片，我们不想要多个图片上传。

由于

Answer 1

感谢来自@ aron9forever的建议我决定不立即上传图片，我只是显示图片然后上传表单提交。这确实带来了令人烦恼的问题，即当他们提交表单时，如果出现问题，他们需要重新点击上传图片，但我可以使用$ _POST变量解决这个问题。

<div class="uploader">
    <img id="imagetoUpload" src="/com/img/upload.png" alt="upload">
</div>
<input type="file" id="productImage" style="display:none;" name="img" value="">

使用这个jQuery

$(function() {
    function readURL(input) {
        if(input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#imagetoUpload').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    };
    $("#productImage").change(function(){
        readURL(this);
    });
    $("#imagetoUpload").click(function() {
        $("input[id='productImage']").click();
    });
});