bootstrap上传预览

⑴ bootstrap-fileinput组件怎么在上传时指定额外的URL参数

由于英文水平问题，阅读官方文档时没有找到该问题的解决方法，于是去github提了一个issue ，得到的答案是仔细阅读文档，里面有一个回调函数可以解决问题??
解决方法
关键的配置参数是uploadExtraData
具体的代码如下：
//获得额外参数的方法
fodderType = function() {
return $("#fodderTypeSelect").val();
};
//初始化fileinput控件（第一次初始化）
function initFileInput(ctrlName, FileExtensions, fileSize) {
var control = $('#' + ctrlName);
control.fileinput({
language: 'zh', //设置语言
uploadUrl: "/WxMedia/ImageUpload", //上传的地址
allowedFileExtensions: FileExtensions, //接收的文件后缀
showUpload: true, //是否显示上传按钮
showCaption: true, //是否显示标题,
maxFileSize: fileSize * 1000, //单位为kb，如果为0表示不限制文件大小
browseClass: "btn btn-primary", //按钮样式
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
initialCaption: "请选择上传素材",
uploadExtraData: function(previewId, index) { //额外参数的关键点
var obj = {};
obj.fodder = fodderType();
console.log(obj);
return obj;
}
});
}
关键点：
可以看到配置文件中uploadExtraData的参数是一个函数形式，这是一个回调函数，会在上传时调用，读取配置的额外参数。

⑵ bootstrap fileinput怎么和ajax一起上传

$(function(){
$("#imageUpload").fileinput({
showCaption: false,
language: 'zh',
enctype: 'multipart/form-data',
uploadUrl: '${basePath}fileupload?action=videoUpload', //上传的地址
allowedFileExtensions : ['flv', 'swf', 'mkv', 'avi', 'rm', 'rmvb'拆凯, 'mpeg', 'mpg', 'ogg', 'ogv', 'mov', 'wmv', 'mp4', 'webm', 'mp3'],//接收的文件后缀
initialPreviewAsData: false //配置上传后是否显示预览
}).on('fileuploaded',
function(event, data, id, index) {
var fname = data.files[index].name;
var out = '<li>' + '文件 # ' + (index + 1) + ' - ' + fname + ' 已经成功纳族上传洞御弊.' + '</li>';
$('#content').attr("value",data.response.videoUrl);//获得后台返回名为videoUrl的json数据
$('#kv-success-1').append(out);
$('#kv-success-1').fadeIn('slow');

⑶ bootstrap fileinput 上传失败，求助

最近因为项目需要研究了下bootstrap fileinput的使用，来记录下这几天的使用心得吧。

前台html页面的代码

<form role="form" id="importFile" method="post"并闹

enctype="multipart/form-data">

<div class="row">

<div class="col-md-3" >

</div>

<div class="col-md-3 ">

<input type="radio" name="excelType" class="radio" id="line" value="line"><label for="line"> 参数2</label>

</div>

<div class="col-md-3 ">

<input type="radio" name="excelType" class="radio" id="pipeline" value="pipeline"><label for="pipeline"> 参数3</label>

</div>

<div class="col-md-3 ">

<input type="radio" name="excelType" class="radio" id="jdj" value="jdj"><label for="jdj"> 参数4</label>

</div>

</div>

<input id="excelFile" name="excelFile" class="file-loading"

type="file" multiple accept=".xls,.xlsx" data-min-file-count="1"

data-show-preview="true"> <br>

</form>

js进行插件的初始化和一些参数的设置

$("#excelFile").fileinput({

uploadUrl:"rest/import/importExcel",//上传的地址

uploadAsync: true,

language : "zh",//设置语言

showCaption: true,//是否显示标题

showUpload: true, //是否显示上传按钮

browseClass: "btn btn-primary", //按钮样绝迟罩式

allowedFileExtensions: ["xls", "xlsx"], //接收的文件后缀

maxFileCount: 10,//最大上传文件数限制

uploadAsync: true,

previewFileIcon: '<i class="glyphicon glyphicon-file"></i>',

allowedPreviewTypes: null,

previewFileIconSettings: {

'docx': '<i class="glyphicon glyphicon-file"></i>',

'xlsx': '<i class="glyphicon glyphicon-file"></i>',

'pptx': '<i class="glyphicon glyphicon-file"></i>',

旦含'jpg': '<i class="glyphicon glyphicon-picture"></i>',

'pdf': '<i class="glyphicon glyphicon-file"></i>',

'zip': '<i class="glyphicon glyphicon-file"></i>',

},

uploadExtraData: function() {

var extraValue = null;

var radios = document.getElementsByName('excelType');

for(var i=0;i<radios.length;i++){

if(radios[i].checked){

extraValue = radios[i].value;

}

}

return {"excelType": extraValue};

}

});

注意： uploadExtraData函数中只能用原生JS来取值，不能用JQuery来获取值，此参数用来向后台传递附加参数，以方便处理，最简单的写法是：

uploadExtraData: {

"excelType": document.getElementByID('id')

}

<input type="radio" name="excelType" class="radio网络搜索引擎营销sem竞价培训班http://www.yingtaow.com/pxfw?id="station" value="station"><label for="station"> 参数1</label>

文件上传成功后的回调方法

$("#excelFile").on("fileuploaded", function(event, data, previewId, index) {

alert("上传成功!");

$("#excelImport").modal("hide");

//后台处理后返回的经纬度坐标json数组，

var array = data.response;

console.dir(array);

//jquery循环取经纬度坐标

$.each(array,function(index,latAndLon){

var lon = latAndLon.lon;

var lat = latAndLon.lat;

var point = new Point(lon, lat, map.spatialReference);

var symbol = new esri.symbol.SimpleMarkerSymbol().setStyle(

SimpleMarkerSymbol.STYLE_CIRCLE).setColor(

new Color([255,255,0,0.5]));

var attr = {"address": "addressName" };

var infoTemplate = new esri.InfoTemplate("标题", "地址 :${address}");

var graphic = new Graphic(point,symbol,attr,infoTemplate);

map.graphics.add(graphic);

});

});

arcgis中点的定义的两种方法：

var point = new Point(lon, lat, new SpatialReference({ wkid: 4326 }));

var point = new Point(lon, lat, map.spatialReference);

后台Java处理，使用common fileupload插件来实现，此处限制只能上传excel 文件

public JSONArray importExcel(HttpServletRequest request,

HttpServletResponse response) throws Exception {

final String allowFileSuffix = "xls,xlsx";

Subject subject = SecurityUtils.getSubject();

String uname = (String) subject.getPrincipal();

String basePath = "D:" + File.separator + uname;

File tmpDir = new File(basePath);// 初始化上传文件的临时存放目录

JSONArray jsonArry = new JSONArray();

if (!tmpDir.exists()) {

tmpDir.mkdirs();

}

// 检查输入请求是否为multipart表单数据。

if (ServletFileUpload.isMultipartContent(request)) {

DiskFileItemFactory dff = new DiskFileItemFactory();// 创建该对象

dff.setRepository(tmpDir);// 指定上传文件的临时目录

dff.setSizeThreshold(1024000);// 指定在内存中缓存数据大小,单位为byte

ServletFileUpload sfu = new ServletFileUpload(dff);// 创建该对象

// sfu.setFileSizeMax(5000000);//指定单个上传文件的最大尺寸

sfu.setSizeMax(10000000);// 指定一次上传多个文件的总尺寸

sfu.setHeaderEncoding("utf-8");

String type = null;

List<FileItem> fileItems = new ArrayList<FileItem>();

try {

fileItems = sfu.parseRequest(request);

} catch (FileUploadException e1) {

System.out.println("文件上传发生错误" + e1.getMessage());

}

String fullPath = null;

String fileName = null;

for (FileItem fileItem : fileItems) {

// 判断该表单项是否是普通类型

if (fileItem.isFormField()) {

String name = fileItem.getFieldName();// 控件名

String value = fileItem.getString();

if (name.equals("excelType")) {

type = value;

}

} else {

String filePath = fileItem.getName();

if (filePath == null || filePath.trim().length() == 0)

continue;

fileName = filePath.substring(filePath

.lastIndexOf(File.separator) + 1);

String extName = filePath.substring(filePath

.lastIndexOf(".") + 1);

fullPath = basePath + File.separator + fileName;

if (allowFileSuffix.indexOf(extName) != -1) {

try {

fileItem.write(new File(fullPath));

} catch (Exception e) {

e.printStackTrace();

}

} else {

throw new FileUploadException("文件格式不正确");

}

}

}

if (type.equals("station")) {

jsonArry = readExcel(fullPath, fileName);

} else if (type.equals("line")) {

System.out.println("===============:line");

} else if (type.equals("pipeline")) {

System.out.println("===============:pipeline");

} else if (type.equals("jdj")) {

System.out.println("===============:jdj");

}

}

return jsonArry;

}

// 判断文件类型

public Workbook createWorkBook(InputStream is, String excelFileName)

throws IOException {

if (excelFileName.toLowerCase().endsWith("xls")) {

return new HSSFWorkbook(is);

}

if (excelFileName.toLowerCase().endsWith("xlsx")) {

return new XSSFWorkbook(is);

}

return null;

}

public JSONArray readExcel(String basePath, String fileName)

throws FileNotFoundException, IOException {

File file = new File(basePath);

Workbook book = createWorkBook(new FileInputStream(file), fileName);

JSONObject jsonObj = new JSONObject();

JSONArray jsonArry = new JSONArray();

Sheet sheet = book.getSheetAt(0);

for (int i = 3; i < sheet.getLastRowNum(); i++) {

Row row = sheet.getRow(i);

String lon = row.getCell(2).getNumericCellValue() + "";

String lat = row.getCell(3).getNumericCellValue() + "";

jsonObj.put("lat", lat);// 纬度

jsonObj.put("lon", lon);// 经度

jsonArry.add(jsonObj);

}

System.out.println(jsonArry.toString());

return jsonArry;

}

⑷ 有用过bootstrap-fileinput的吗

这是一个增强的 HTML5 文件输入控件，是一个 Bootstrap 3.x 的扩展，实现文件上传预览，多文件上传等功能。

一般情况下，我们需要引入下面两个文件，插件才能正常使用：

bootstrap-fileinput/css/fileinput.min.css

bootstrap-fileinput/js/fileinput.min.js

简单的界面效果如下所示，和众多上传文件控件一样，可以接受各种类型的文件。当然，我们也可以指定具体接受的文件类型等功能。

⑸ bootstrap 多文件上传

```

<link href="/static/backend/css/fileinput.css" rel="stylesheet" />

 <script src="/static/backend/js/fileinput.js"></script>

 <link href="/static/backend/css/fileinput.min.css" rel="stylesheet" />

 <script src="/static/backend/js/fileinput.min.js"></script>

      <div class="file-loading">

        <input type="file" id="myfile" name="myfile[]" multiple data-allowed-file-extensions='["csv"]'/>//只能是csv 文件。 name=myfile[] 可以上传多个文件

       </div>

 </div>

Js

 $("#myfile").fileinput({

uploadUrl: "/backend/home/upload", //上传地址

uploadAsync: false, //设置上传同步异步 此为同步

            showUpload: true,

            showRemove: true,

         //   showClose: true,

maxFileCount: 10, //表示允许同时上传的最大文件个数

          /*  layoutTemplates:{

                actionDelete: ''

            },

            browseClass: 'btn btn-primary'*/

        });

后台/backend/home/upload

 public function upload(){

        var_mp($_FILES['myfile']);

      foreach ($_FILES["myfile"]['tmp_name'] as$k =>$v){

                   move_uploaded_file($v,ROOT_PATH.'public'.DS.'uploads'.DS.$_FILES['myfile']['name'][$k]);

Uploads要自己创建好文件夹

            }

        return 1; // 上传后要返回1

    }

```

<input type="file" id="myfile" name="myfile" multiple 控制可以上传多个 data-allowed-file-extensions='["csv"]'/>

 当点击上传后，报错，提示你必须选择最少X个文件上传。

input标签元素属性：data-min-file-count="2" 设置为X个文件，限制上传文件数。

data-allowed-file-extensions= '["csv"]'

限定上传什么文件。

⑹ 基于bootstrup 3可预览的html5文件上传插件怎么用

bootstrap实现的多种文件上传插件，可选择各种文件，解压后请点击index预览