上传文件有不少JS插件目前使用的是百度的webupload 由于 在单页面 多个文件上传时 webupload并不那么好用 渐渐探索到了bootstrap-fileinput
现在主要使用语言仍然是PHP 框架是laravel
HTML代码如下
<form enctype="multipart/form-data">
<input type="file" name="file" id="txt_file" multiple class="file-loading" />
<input type="hidden" id='图片地址' value=''>
</form>
css js所需引入的文件
<!-- 最新的 Bootstrap 核心 css文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- 最新的 fileinput核心 css文件 -->
<link href="../css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="../js/fileinput.js" type="text/javascript"></script>
<script src="../js/locales/zh.js" type="text/javascript"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
$("#txt_file").fileinput({
language: 'zh',
uploadUrl: '{{url('fun2')}}', // 上传文件的后台地址
allowedFileExtensions : ['jpg', 'png','gif'],
overwriteInitial: false,
maxFileSize: 1000, //最大文件大侠
maxFilesNum: 10, //最多文件数
uploadExtraData: { '_token':'{{csrf_token()}}' }, //表单额外的内容 如laravel中 POST方式往往需要携带 _token
//allowedFileTypes: ['image', 'video', 'flash'],
slugCallback: function(filename) {
// return filename.replace('(', '_').replace(']', '_');
}
});
//上传完成后的回掉
$("#txt_file").on("fileuploaded", function (event, data, previewId, index) {
//!!!我个人使用的时候!!!返回值必须为json格式
//我在后台程序 单纯的返回了 json_encode('/storage/img/3142353534.jpg')
//但是在这里仍然需要使用data.response获取图片地址
$('#图片地址').val(data.response);
});
//后台PHP处理上传的文件 (laravel5.*)
$file = Input::file('file');
//检验一下上传的文件是否有效.
$clientName = $file -> getClientOriginalName();
$tmpName = $file ->getFileName();
$realPath = $file -> getRealPath();
$extension = $file -> guessExtension();
$mimeTye = $file -> getMimeType();
//这里要注意一点,以前我们使用 mime_content_type() ,在php5.3 之后,开始使用 fileinfo 来获取文件的mime类型.所以要加入 php_fileinfo的php拓展.windows下是 php_fileinfo.dll,在php.ini文件中将 extension=php_fileinfo.dll前面的分号去掉即可.当然要重启服务器.
//$path = $file -> move('storage/uploads');
$newName = str_random(18).".".$extension;
$path = $file -> move(base_path().'/public/storage/uploads',$newName);
return json_encode('/storage/uploads/'.$newName);
至此就可以使用bootstrap风格的文件上传了