1.HTML结构
<label for="file-input">File:</label>
<input type="file" id="file-input" />
/*<img src="" alt="" accept="image/*" style="max- 250px">*/
<img src="" alt="" style="max- 250px">
input的accept属性需要ie10的支持所以后面用js来判断。
2.上传API
$(function() {
var $fileInput = $('input[type=file]');
var $imageArea = $('img');
var fileInfo;
$fileInput.on('change', getFileInfo);
function getFileInfo(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = (function(imageFile) {
return function(e) {
fileInfo = e.target.result;
$imageArea.attr('src',fileInfo);
}
})(file);
reader.readAsDataURL(file);
}
});
这样就可以实现功能了
3.判断文件类型
(/.(jpg|jpeg|png)/i).test(file.name)
完整代码为
$(function() {
var $fileInput = $('input[type=file]');
var $imageArea = $('img');
var fileInfo;
$fileInput.on('change', getFileInfo);
function getFileInfo(e) {
var file = e.target.files[0];
if (!(/.(jpg|jpeg|png)/i).test(file.name)) {
alert("只支持jpg/jpeg/png类型");
}else{
var reader = new FileReader();
reader.onload = function(e) {
fileInfo = e.target.result;
$imageArea.attr('src',fileInfo);
}
reader.readAsDataURL(file);
}
}
});