1
看圖像的例子上傳與jQuery這裏: http://www.zurb.com/playground/ajax_uploadjquery圖像預覽,仍然保留提交?
使用這個例子很容易創建一個簡單的圖像預覽,你可以看到下面。
圖像預覽完美。然而,「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>