自动上传图片功能

自动上传图片功能

利用bootstrap框架的插件(fileinput)
使用
第一步:

<link href="~/bootstrap/css/fileinput.min.css" rel="stylesheet" />
<script type="text/javascript" src="~/bootstrap/js/fileinput.min.js"></script>

在html文件里引入css样式表和js脚本

第二步:

在html结构里面写好input标签,类型要修改成file
<div class="form-group">
     <div class="col-sm-12">
          <label class="font-noraml">图片视频上传区域</label>
          <div class="file-loading">
               <input name="file_data" id="file_data" type="file" multiple>
          </div>
      </div>
 </div>

第三步最重要的一步:

//上传图片
    $("#file_data").fileinput({
        'theme': 'explorer-fas',
        'uploadUrl': ctx + "/system/upload×××××,//上传的地址
        overwriteInitial: false,//覆盖初始化
        // initialPreviewAsData: true,
        showUpload: false, //是否显示上传按钮
        allowedFileExtensions: ['jpg', 'gif', 'png','jpeg'],//接收的文件后缀
        showBrowse: true,  //关闭浏览按钮
        showPreview: true, //是否显示预览
        initialPreview: [], //初始预览
        uploadExtraData: {taskId: taskId, type: "PLAN_DELEGATION"},//要发送的参数和类型
        validateInitialCount:true,
        maxFileCount: 4,//一次上传最多数量文件
    }).on('filebatchselected',function(){   //文件自动上传
        $(this).fileinput("upload");
    });

接下来就是出来的效果: