我正在使用 Jasny Bootstrap 在选择文件时显示文件预览。
<div class="fileinput fileinput-new" data-provides="fileinput">
<div>
<span class="btn btn-primary btn-file"><span class="fileinput-new"><span class="fa fa-camera"></span> Image 3</span>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
<input type="file" name="file" class="ephoto-upload" accept="image/jpeg"></span>
</div>
</div>
我想在选择图像后立即通过ajax开始提交该图像。我正在使用以下代码。
<script>
$('.ephoto-upload').change(function(){
if($(this).val()!='') {
var formData = new FormData();
formData.append('file', $(this)[0].files[0]);
$.ajax({
url: '/path/to/upload',
type: 'POST',
data: formData,
async: false,
success: function (r) {
if(r.success) {
//success work
}
},
cache: false,
contentType: false,
processData: false
});
}
});
</script>
上传工作正常,但在ajax上传完成后会显示图像的预览。因此,有时页面会卡住,然后会显示预览。 但我想在选择图像后立即显示预览,并在显示所选图像后执行 Ajax。
最佳答案
您正在设置 ajax async=false
这意味着导航器将卡住,直到图像上传。
另一方面,这就是您想要的:
<form>
<div class="fileinput fileinput-new" data-provides="fileinput">
<div>
<span class="btn btn-primary btn-file"><span class="fileinput-new"><span class="fa fa-camera"></span> Image 3</span>
<div id="preview" name="preview" class="fileinput-preview fileinput-exists thumbnail" style="width: 200px; height: 150px; display:block;"></div>
<img id="prevImg" name="prevImg" />
<input type="file" name="file" id="file" class="ephoto-upload" accept="image/jpeg"></span>
</div>
</div>
</form>
js:
$('.ephoto-upload').change(function(){
previewURL(this);
if($(this).val()!='') {
var formData = new FormData();
formData.append('file', $(this)[0].files[0]);
$.ajax({
url: '/path/to/upload',
type: 'POST',
data: formData,
success: function (r) {
if(r.success) {
//success work
}
},
cache: false,
contentType: false,
processData: false
});
}
});
function previewURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
//$('#prevImg').attr('src', e.target.result);
$('#preview').css("background", "url(" + e.target.result +")" + " right top no-repeat");
}
reader.readAsDataURL(input.files[0]);
}
}
我删除了 async=false
,因为默认值为 true
。
这是demo
关于jquery - ajax 上传时 jasny bootstrap 中的即时图像预览,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24907144/