html5文件上传与展示页面,html如何实现页面上传图片并且能进行展示的示例代码分享...

html页面：

本功能实现图片上传并显示，点击“查看”按钮也显示图片

缩略图

@ if (!isEmpty(news.thumbnail_atta_id)) {

查看

@ }

上传...

js代码：

//缩略图文件上传

$('#fileupload').fileupload({

dataType: 'json',

add: function(e, data) {

var acceptFileTypes = /(\.|\/)(gif|jpe?g|png)$/i;

if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {

alert('请上传图片格式的文件！')

} else {

data.submit();

}

},

done: function (e, data) {

$('#thumbnail_atta_id').val(data.result.id);

$('#thumbnail').attr('src', data.result.url).show();

}

});