BootStrap Fileinput上传插件使用实例代码

<link href="~/content/fileinput.min.css" rel="external nofollow" rel="stylesheet" />
<script src="~/scripts/jquery-1.10.2.min.js"></script>
<script src="~/scripts/fileinput.js"></script>
<script src="~/scripts/zh.js"></script>

<input type="file" id="uploaddoc" name="file" class="file" multiple />//上传按钮 multiple为可多文件上传 
<input type="hidden" id="doc" name="doc" value="" />//保存文件路径 

$("#uploaddoc").fileinput({ 
    language: 'zh', 
    uploadurl: '/form/upload',//后台上传方法 
    allowedfileextensions: ['doc', 'docx'],//上传文件扩展名 
    shouupload: false, 
    showremove: false, 
    browseclass: 'btn btn-danger', 
    maxfilesize: 5000, 
    maxfilenum: 10, 
    allowedpreviewtypes: null, 
    previewfileiconsettings: { 
      'doc': '<i class="fa fa-file-word-o text-muted"></i>' 
    }, 
    previewfileextsettings: { 
      'doc': function (ext) { 
        return ext.match(/(doc|docx)$/i); 
      } 
    } 
  });

var list = new array();//声明保存上传文件路径数组对象 
  //上传 - 删除 
  $('#uploaddoc').on('filesuccessremove', function (event, key) { 
    var abort = true; 
    if (confirm("确定要删除已上传的文件吗？")) { 
      abort = false; 
    } 
    var index1; 
    $.each(list, function (index, item) { 
      if (item.keyid == key) {//默认fileinput.js的key与keyid不一致，需要改动源码，详情见下文 
        index1 = index; 
        $.post("/form/uploaddelete", { key: item.keyid, path: item.path });//删除以上传到本地的文件 
      } 
    }); 
    list.splice(index1, 1); 
    var path = ""; 
    $.each(list, function (index, item) { 
      path += item.path; 
    }); 
    $("#doc").val(path);//修改保存的文件路径 
  }); 
  //取消上传事件，左上角的取消按钮 
  $('#uploaddoc').on('filecleared', function (event, files) { 
    $.each(list, function (index, item) { 
      $.post("/form/uploaddelete", { key: "all", path: item.path }); 
    }); 
    list = new array();//清空保存的文件路径数组对象，这里是赋值给新的空对象，应该可以优化为删除以保存的所有值 
    $("#doc").val(""); 
  }); 
 
  //上传 - 成功 
  $("#uploaddoc").on("fileuploaded", function (event, data, previewid, index) { 
    var form = data.form, files = data.files, extra = data.extra, 
    response = data.response, reader = data.reader; 
    list.push({ path: response.path, keyid: previewid }) 
    $("#doc").val($("#doc").val() + response.path); 
    //$("#doc").val(list); 
  }); 

//上传方法  
public jsonresult upload() 
    { 
      httppostedfilebase file = request.files["file"]; 
      if (file == null) 
      { 
        return json(new { error = "上传异常" }); 
      } 
      var ext = path.getextension(file.filename); 
      var filename = path.getfilenamewithoutextension(file.filename); 
      var serverfilenname = guid.newguid().tostring("n") + "_" + filename + ext; 
      try 
      { 
        var path = "/file"; 
        var dic = string.format("{0}/{1}/{2}/{3}", path, datetime.today.year.tostring(), datetime.today.month.tostring(), datetime.today.day.tostring()); 
        if (!directory.exists(server.mappath(dic))) 
        { 
          directory.createdirectory(server.mappath(dic)); 
        } 
        var webpath = string.format("{0}/{1}", dic, serverfilenname); 
        var serverpath = path.combine(server.mappath(dic), serverfilenname); 
        file.saveas(serverpath); 
        return json(new { 
          url = "/form/uploaddelete",//定义要删除的action，没有用到可删掉 
          key = serverfilenname, 
          path = webpath }); 
      } 
      catch (exception ex) 
      { 
        return json(new { error = "上传异常" + ex }); 
      } 
    } 
//删除本地文件方法 
public jsonresult uploaddelete() 
    { 
      try 
      { 
        var key = request.params["key"]; 
        var path = request.params["path"]; 
        if (string.isnullorempty(key) || string.isnullorempty(path)) 
        { 
          return json(false, jsonrequestbehavior.denyget); 
        } 
        path = server.mappath(path); 
        if (system.io.file.exists(path)) 
        { 
          system.io.file.delete(path); 
          return json(true, jsonrequestbehavior.denyget); 
        } 
        else 
        { 
          return json(false, jsonrequestbehavior.denyget); 
        } 
      } 
      catch (exception) 
      { 
        return json(false, jsonrequestbehavior.denyget); 
      } 
    }