php 使用上传文件预览插件,bootstrap fileinput插件实现预览上传照片功能方法详解...

本文主要介绍了bootstrap fileinput插件实现预览上传照片功能,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下，希望能帮助到大家。

效果图如下所示：

具体代码如下：

class="fileinput-new">选择图片

更改

移除

请选择1M以内图片

var handleEvent = function() {

$("#uploadImage").fileupload({

url: "design/resource/uploadFile",

dataType: 'json',

autoUpload: false,

acceptFileTypes: /(gif|jpe?g|png)$/i,

maxFileSize: 1000000, // 1 MB

imageMaxWidth: 100,

imageMaxHeight: 100,

messages: {

acceptFileTypes: '文件类型不匹配',

maxFileSize: '文件过大',

minFileSize: '文件过小'

}

}).on("fileuploadadd", function(e, data) {

$("#titleImageError").html("");

$("#addBtn,#updateBtn").off("click").on("click", function() {

if($("#dialogForm").validate().form()) {

customGlobal.blockUI("#modalContent");

data.submit()

}

})

}).on("fileuploadprocessalways", function(e, data) {

var index = data.index,

file = data.files[index];

if(file.error) {

$("#titleImageError").html(file.error)

}

$("#addBtn,#updateBtn").prop('disabled', !!data.files.error);

}).on("fileuploaddone", function(e, data) {

if(data.result.returnState == "ERROR") {

toastr.warning(data.result.returnMsg);

customGlobal.ajaxCallback(data);

return;

}

addNews(data.result.returnData.url);

});

}

bootstrap-fileinput.css文件：(github目前正在维护中，之后所有代码上传至我的github)

/*!

* Jasny Bootstrap v3.1.3 (http://jasny.github.io/bootstrap)

* Copyright 2012-2014 Arnold Daniels

* Licensed under Apache-2.0 (https://github.com/jasny/bootstrap/blob/master/LICENSE)

*/

.btn-file {

position: relative;

overflow: hidden;

vertical-align: middle;

}

.btn-file > input {

position: absolute;

top: 0;

right: 0;

width: 100%;

height: 100%;

margin: 0;

font-size: 23px;

cursor: pointer;

filter: alpha(opacity=0);

opacity: 0;

direction: ltr;

}

.fileinput {

<