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

似乎脚本不能上传，因此除非我再次复制字段，否则无法在提交时重新加载。

Jquery图像预览仍然保留提交？

1 个答案: