支持多文件上传，预览，拖拽的基于bootstrap的上传插件fileinput

参考：

http://www.cnblogs.com/landeanfen/p/5007400.html   一篇详细的包括后台C#的文章

http://plugins.krajee.com/file-input       官网

http://blog.csdn.net/sangjinchao/article/details/52250234  某个博主写的博客用了php看起来较简单

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="path/to/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!--如果你想再上传图片之前调整图片的大小，你需要引入canvas-to-blob.min.js。并且要在fileinput.min.js之前引用 -->
<script src="path/to/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script>

<!--如果你想在初始预览的时候为图片分类和从新排列，你需要引入sortable.min.js。并且要在fileinput.min.js之前引用 -->
<script src="path/to/js/plugins/sortable.min.js" type="text/javascript"></script>

<!--如果你希望简化你的之前写的html文件中的html，你就需要引用purify.min.js，而且必须在fileinput.min.js之前引用 -->
<script src="path/to/js/plugins/purify.min.js" type="text/javascript"></script>

<!--  fileinput插件的注意内容-->
<script src="path/to/js/fileinput.min.js"></script>

<!-- bootstrap.js引用是你希望 缩放和在更大的模拟对话框中查看文件内容 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>

<!-- 如果你想有个主题，引入下面的them.js -->
<script src="path/to/themes/fa/theme.js"></script>

<!-- 如果你想有翻译文件，引入下面的js -->
<script src="path/to/js/locales/<lang>.js"></script>

引入这么多看起来都很费劲。那么如果我们想要最精简的，只需要引入下面的

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="path/to/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script><script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="path/to/js/fileinput.min.js"></script>

html代码

<form enctype="multipart/form-data">       //enctype属性规定在发送到服务器之前应该如何对表单数据进行编码。multipart/form-data不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。

　　<input id="file-1" name="file" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="1"/>

</form>

js代码

$("#file-1").fileinput({
　　uploadUrl: '', // 必须设置个路径进入php代码部分
　　allowedFileExtensions : ['jpg', 'png','gif','txt','zip','ico','jpeg','js','css','Java','mp3','mp4','doc','docx'],//允许的文件类型
　　overwriteInitial: false,
　　maxFileSize: 1500,//文件的最大大小 单位是k
　　maxFilesNum: 10,//最多文件数量
　　// allowedFileTypes: ['image', 'video', 'flash'],
　　slugCallback: function(filename) {
　　　　return filename;
　　}
});

php代码

$file=$_FILES['file'];//获取上称文件的信息，数组形式

$date['file_name'] = $file['name'];//文件的名称
$date['file_size'] = $file['size'];//文件的大小
$date['file_type'] = $file['type'];//文件的类型

然后进行上传，用ajax返回一个错误信息或者成功信息

直接用echo返回也行