javascript - Jquery 图像预览并仍然保留在提交时？

Question

在此处查看使用 JQuery 上传图像的示例: http://www.zurb.com/playground/ajax_upload

使用此示例可以轻松创建简单的图像预览，如下所示。

图像预览效果完美。但是，“input type =“file”id =“imageUpload””不会保留原始文件，因此在实际提交/保存整个表单时“form.imageUpload”是空的并且不会随其一起提交。

我知道我已经使用 AjaxUpload 上传了图像，但如果您只是出于预览原因使用它(如下面的示例所示)，您仍然希望保留“老式方式”。这个脚本似乎从表单字段“imageUpload”的输入中删除了值，我怎样才能让脚本维护它，这样我仍然可以用旧的方式上传。

谢谢

var thumb = $('img#thumb'); 

new AjaxUpload('imageUpload', {
    action: 'plugins/thumbnailupload.cfm',
    name: 'image',
    onSubmit: function(file, extension) {
        $('span.status').text("Loading preview");
    },
    onComplete: function(file, response) {
        thumb.load(function(){
            $('span.status').text("Loading");
            thumb.unbind();


            $.ajax({
                    type: "get",
                    url: "plugins/common/helpers/thumbCleanRam.cfm",
                    data: {
                    fileID: escape(response)
                },
            dataType: "json",
            });


        });
        response = $.trim(response)
        thumb.attr('src', 'plugins/common/helpers/thumbnailpreview.cfm?f='+escape(response));
    }
});

});

 <div class="clearfix">
      <label for="icon">Upload Image</label>
      <div id="preview"><span id="status"></span><img id="thumb"></div>
      <div class="input">
        <input type="file" id="imageUpload" name="imageUpload">
        <br/>
      </div>
    </div>

Answer 1

看来这是不可能的，因为脚本需要上传，因此除非我再次复制该字段，否则不可能在提交时重新加载。