当我们需要上传图片时，往往需要先查看图片是否符合要求，这时就需要实现图片上传本地预览功能。下面，我将为大家介绍如何基于jquery实现图片上传本地预览功能。
步骤一：获取需要上传的文件
首先，我们需要使用HTML5的File API获取需要上传的文件。使用File API可以选择多个文件，支持多种文件类型，具体代码如下：
<input type="file" id="fileInput" multiple accept="image/*">
其中，multiple表示可以选择多个文件，accept为可选参数，限制上传文件类型为图片。
步骤二：预览图片
获取到需要上传的文件后，我们需要在本地预览这些图片。由于获取到的是文件类型，需要使用FileReader对象读取文件内容并显示在标签中，代码如下：
<input type="file" id="fileInput" multiple accept="image/*">
<div id="previewContainer"></div>
<script>
$(function() {
$('#fileInput').change(function() {
var files = $(this)[0].files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var reader = new FileReader();
reader.onload = function(e) {
$('#previewContainer').append('<img src="' + e.target.result + '">');
}
reader.readAsDataURL(file);
}
});
});
</script>
其中，onload事件在读取完成后触发，并将读取到的文件内容以base64格式传给标签的src属性，从而实现图片本地预览。
步骤三：上传图片
当用户确认选择的图片无误后，需要上传这些图片。使用Ajax技术可以实现无刷新上传，具体代码如下：
<input type="file" id="fileInput" multiple accept="image/*">
<div id="previewContainer"></div>
<button id="submit">上传</button>
<script>
$(function() {
$('#fileInput').change(function() {
var files = $(this)[0].files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
var reader = new FileReader();
reader.onload = function(e) {
$('#previewContainer').append('<img src="' + e.target.result + '">');
}
reader.readAsDataURL(file);
}
});
$('#submit').click(function() {
var files = $('#fileInput')[0].files;
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append('file', files[i]);
}
$.ajax({
url: '/upload',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(data) {
alert('上传成功');
},
error: function(xhr, errorType, error) {
alert('上传失败');
}
});
});
});
</script>
其中，FormData对象用于封装需要上传的文件，processData和contentType设置为false表示不对数据进行序列化和转换，直接传输二进制数据。
示例1：使用Bootstrap FileInput插件实现图片上传预览
Bootstrap FileInput是基于jQuery开发的文件上传插件，提供了多种文件上传预览和样式设置方式。下面是使用Bootstrap FileInput插件实现图片上传预览的代码例子：
<input id="fileInput" name="file[]" type="file" multiple class="file-loading">
<div id="previewContainer"></div>
<script>
$(function() {
$('#fileInput').fileinput({
theme: 'fa',
language: 'zh',
previewFileType: 'image',
allowedFileTypes: ['image'],
browseClass: 'btn btn-primary',
uploadClass: 'btn btn-default',
removeClass: 'btn btn-default',
uploadUrl: '/upload',
uploadAsync: false,
showPreview: true,
showRemove: false,
showUpload: false,
autoReplace: true,
maxFileCount: 10,
maxFileSize: 10240,
resizeImage: true,
resizeIfSizeMoreThan: 3000,
resizeImageQuality: 0.8,
resizePreference: 'width',
initialPreviewAsData: true,
initialPreview: [],
initialPreviewConfig: [],
fileActionSettings: {
zoomIcon: '<i class="fa fa-search-plus"></i>',
deleteIcon: '<i class="fa fa-times"></i>',
dragIcon: '<i class="fa fa-arrows"></i>',
},
layoutTemplates: {
footer: '',
},
fileUploaded: function(event, data, previewId, index) {
var response = data.response;
var id = response.id;
$(this).append('<input type="hidden" name="ids[]" value="' + id + '">');
},
fileBatchSelected: function(event, files) {
$('#previewContainer').empty();
$(this).fileinput('upload');
$('#previewContainer').append('<div class="file-loading">' + $(this).fileinput('loading') + '</div>');
},
filePreupload: function(event, data, previewId, index) {
$('#previewContainer').empty();
$('#previewContainer').append('<div class="file-loading">' + $(this).fileinput('loading') + '</div>');
},
fileSuccessRemove: function(event, data, previewId, index) {
$('input[name="ids[]"][value="' + data.id + '"]').remove();
},
ajaxSettings: {
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
},
});
});
</script>
示例2：使用Plupload插件实现图片上传预览
Plupload是一款多功能的文件上传插件，支持多种文件上传预览和自定义样式设置。下面是使用Plupload插件实现图片上传预览的代码例子：
<input id="fileInput" type="file">
<script>
$(function() {
var uploader = new plupload.Uploader({
browse_button: $('#fileInput')[0],
url: '/upload',
filters: {
mime_types: [
{title: 'Image files', extensions: 'jpg,jpeg,gif,png'},
],
max_file_size: '10mb',
prevent_duplicates: true,
},
});
uploader.init();
uploader.bind('FilesAdded', function(up, files) {
$('#previewContainer').empty();
plupload.each(files, function(file) {
var reader = new mOxie.FileReader();
reader.onload = function(e) {
$('#previewContainer').append('<img src="' + e.target.result + '">');
}
reader.readAsDataURL(file.getNative());
});
});
uploader.bind('FileUploaded', function(uploader, file, res) {
alert('上传成功');
});
uploader.bind('Error', function(up, err) {
if (err.code == plupload.FILE_SIZE_ERROR) {
alert('文件大小超过10MB，不允许上传！');
}
if (err.code == plupload.FILE_DUPLICATE_ERROR) {
alert('该文件已存在，不能重复上传！');
}
});
});
</script>
其中，使用Plupload.Uploader对象创建上传实例，在FilesAdded事件中获取需要上传的文件并在本地预览，FileUploaded事件表示上传成功后的处理，Error事件表示上传失败或错误时的处理。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于jquery实现图片上传本地预览功能 - Python技术站
微信扫一扫 
支付宝扫一扫 