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預覽