关于bootstrap fileupload.js上传插件的使用之一

bootstrap fileupload.js这个插件是在做一个上传excel文件后生成曲线图时用到的，在网上找了很长时间资料，一直拿到的返回值有问题。现在将整体方案分享下     //新手，

初始化：

    该插件必须在调用jquery后才引用bootstrap后才可引用。

一、引用代码

<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.min.css"/>
<!--引用Jquery-->
<script src="js/jquery-3.1.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>

<!--引用自己的js-->
<script src="js/domeJS.js" type="text/javascript" charset="utf-8"></script>

<!--引入bootstrap.file-input插件的css和js文件-->
<link rel="stylesheet" type="text/css" href="fileInput/fileinput.min.css"/>
<script src="fileInput/fileinput.min.js" type="text/javascript" charset="utf-8"></script>

<!--支持中文化的需要引入的js文件-->
<script src="fileInput/zh.js" type="text/javascript" charset="utf-8"></script>

引入成功后，HTML的代码

<li class="upload_li">
	<label class="control_label">选择文件</label>							
	<input id="input_file" type="file" class="file" name="file_execl"/>
</li>

这个是引入后的界面；

二、下来是初始化控件，js文件中

function initFileInput(ctrlName,uploadUrl){
    var control = $('#' + ctrlName);

//我使用的功能比较少，这块可以根据下面的内容自己添加（复制别人的）
    control.fileinput({
    	language : 'zh',
        allowedFileExtensions : ['xlsx','xls'],//格式
        showCaption : true,//是否显示文件标题
        showPreview : false,//是否显示预览
        showUpload : true,//是否显示上传按钮
        uploadUrl : uploadUrl,
        dropZoneEnabled: false,
  <span style="font-family: Arial, Helvetica, sans-serif;">  });</span>

//异步上传返回结果处理
    control.on("fileuploaded", function (event, data, previewId, index) {
        alert((data.response).succ);
    })；	
};

    我就是在这块的衣服上传返回结果的处理卡住了，因为不知道返回的json格式是啥，试了好几次。

三、json格式

{
    "form": {},
    "files": [
        {}
    ],
    "filenames": [
        "1 _ 副本 _5_.xlsx"
    ],
    "filescount": 1,
    "extra": {},
    "response": {
        "succ": "成功"
    },
    "reader": {},
    "jqXHR": {
        "readyState": 4,
        "responseText": "{\"succ\":\"\\u6210\\u529f\"}\t\r\n",
        "responseJSON": {
            "succ": "成功"
        },
        "status": 200,
        "statusText": "OK"
    }
}

这个就是json的返回格式，我们主要需要拿到的就是response;(data.response).succ就可以正常拿到值，其余想要获取的值类似。

四、PHP后台处理代码：

因为只是一个简单的dome没有做安全验证，文件保存在当前upload文件夹下，没有做文件夹是否存在判断，所以需要自己先创建好upload文件夹。

<?php
    if(!$_FILES["file_execl"]){
        echo('没有找到文件');
    }else{
//	echo "Upload: " . $_FILES["file_execl"]["name"] . "<br />";//上传文件名
//	echo "Type: " . $_FILES["file_execl"]["type"] . "<br />";//类型
//	echo "Size: " . ($_FILES["file_execl"]["size"] / 1024) . " Kb<br />";//大小
//	echo "Temp file: " . $_FILES["file_execl"]["tmp_name"] . "<br />";//；保存的临时文件名

	
	$uploaddir  =  'upload/' ;
	$uploadfile  =  $uploaddir  .  basename ( $_FILES [ 'file_execl' ][ 'name' ]);
	if(move_uploaded_file($_FILES["file_execl"]["tmp_name"] , $uploadfile )){
		$succ = array('succ' => '成功');
		echo json_encode($succ);
	}else{
		$newData = array('succ' => '失败');
		echo json_encode($newData);
	}
    }
?>

后附：

某位网友整理的初始化的参数：

• showCaption：是否显示文件的标题。默认值true。
• showPreview：是否显示文件的预览图。默认值true。
• showRemove：是否显示删除/清空按钮。默认值true。
• showUpload：是否显示文件上传按钮。默认是submit按钮，除非指定了uploadUrl属性。默认值true。
• showCancel：是否显示取消文件上传按钮。只有在AJAX上传线程中该属性才可见可用。默认值true。
• captionClass：在标题容器上额外的class。类型string。
• previewClass：在预览区域容器上的额外的class。类型string。
• mainClass：添加在文件上传主容器。类型string。
• initialDelimiter：在initialPreview属性中用于上传多个文件时的分隔符。默认值：'*$$*'。
• initialPreview：类型string或array。显示的初始化预览内容。你可以传入一个简单的HTML标签用于显示图片、文本或文件。如果设置一个字符串，会在初始化预览图中显示一个文件。你可以在initialDelimiter属性中设置分隔符用于显示多个预览图。如果设置为数组，初始化预览图中会显示数组中所有的文件。
allowedPreviewTypes : [ 'image' ],
allowedFileExtensions : [ 'jpg', 'png', 'gif' ],
maxFileSize : 2000,