关于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文件夹。<?phpif(!$_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：在initialPrevie8e04w属性中用于上传多个文件时的分隔符。默认值：'*$$*'。• initialPreview：类型string或array。显示的初始化预览内容。你可以传入一个简单的HTML标签用于显示图片、文本或文件。如果设置一个字符串，会在初始化预览图中显示一个文件。你可以在initialDelimiter属性中设置分隔符用于显示多个预览图。如果设置为数组，初始化预览图中会显示数组中所有的文件。allowedPreviewTypes : [ 'image' ],allowedFileExtensions : [ 'jpg', 'png', 'gif' ],maxFileSize : 2000,