源码地址:https://github.com/kartik-v/bootstrap-fileinput

核心文件:
bootstrap-fileinput/css/fileinput.min.css
bootstrap-fileinput/js/fileinput.min.js
bootstrap-fileinput/js/locales/zh.js

html:

<img id="IMG" class="img-circle" src="images/img.png"  />		<!-- 图片预览 -->
<input id="Image" name="Image" class="form-control" type="file">
<input id="Image_url" name="ImageUrl" type="hidden" >			<!-- 图片地址 -->

多选:

<input id="Image" name="Image" class="form-control" type="file" multiple>

js:

$('#Image').fileinput({
    uploadUrl: '',			//请求地址
    //uploadAsync: true,	//异步上传
	showUpload: true,		//是否显示上传按钮
    maxFileSize : 200,		//单位为kb,如果为0表示不限制文件大小
    maxFileCount: 1,		//同时上传的最大文件个数
    enctype: 'multipart/form-data',
    allowedPreviewTypes : [ 'image' ],
    allowedFileExtensions : ["jpg", "png","gif"],
    dropZoneTitle: "可拖拽图片文件到这里", 
    dropZoneClickTitle: "或者点击此区域添加图片",
    dropZoneEnabled: false,	//是否显示拖拽区域
    showBrowse: false,
    browseOnZoneClick: true,
	browseLabel: '选择图片',
	layoutTemplates: {
    	actionUpload: '',	//文件上去除上传按钮
//			actionDelete: '',	//去除删除按钮
    },
	uploadExtraData:function(){	//向后台传递参数
        //var data = $('#form').serialize();	//表单序列化传后台报错暂不知原因,直接传参可以
		//return data; 
		var data = {
			Id: $("#Id").val(),
			Name: $("#Name").val(),
			Sex: $("input[name=\"sex \"]:checked").val(),
		}
		return data;
	},
}).on("filebatchselected", function(e, files) {		//选择文件后处理事件(选择图片后转码64位存储)
    var file = this.files[0];
    // 创建一个FileReader对象
    var oFReader = new FileReader();
    // 读取File对象的数据
    oFReader.readAsDataURL(file);
    // 绑定load事件
    oFReader.onload = function (oFREvent) {
        cover = oFREvent.target.result;
        console.log(oFREvent.target.result);
        $("#Image_url").val(oFREvent.target.result)
    }
    //当FileReader对象通过readAsDataURL读取数据成功后,就会触发load事件。target中的result属性的值,就是该文件的base64数据
}).on("fileuploaded", function(event, data, previewId, index) {	//异步上传返回结果处理
	var result = data; //后台返回的json
	$("#IMG").attr("src", result);
});

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
可以给按钮添加事件,上传图片同时向后台传递其他表单数据或参数:

$("#Image").fileinput("upload");	//文件上传
Logo

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐