给大家分享一个FileInput的使用实例,也是自己开发中遇到的问题
如何使用FileInput
使用时的样式
使用FileInput只需要将相关的js,css下载引用即可,相信当大家遇到这个问题的时候已经有了bootstrap开发的知识,这些基础已经不成问题
选择文件后的样式,如果配置妥当的话,点击上传按钮进度条将会读满并显示Done
前台代码,这里有一个小小的问题 form表单的enctype属性
表单中enctype="multipart/form-data"的意思,是设置表单的MIME编码。默认情况,这个编码格式是application/x-www-form-urlencoded,不能用于文件上传;只有使用了multipart/form-data,才能完整的传递文件数据,进行下面的操作.
但是我们不需要配置,否则会出现form表单提交其他数据的问题
[html] view plain copy
- class="line line-dashed line-lg pull-in">
- class="form-group">"
- <label> class="col-sm-3 control-label">照片/<label>
class="col-sm-9">- id="JSh_ZhP" type="file" class="file" name="file">
- type="hidden" id="JSh_ZhP_Path" name="tbllecturer.JSh_ZhP"/>
class="help-block">支持jpg、jpeg、png、gif格式,大小不超过2.0M
接下来就说说如何配置相应的js
默认的fileinput.js应该有一个页面加载完毕的动作,我们打开fileinput.js,果然有相应的方法。
[javascript] view plain copy
- $(document).ready(function () {
- var $input = $('input.file[type=file]');
- if ($input.length) {
- $input.fileinput();
- } });
接下来将它注释掉,我们自己写初始化方法,在fileinput,js里添加initFileInput方法,并自己完成加载时的方法,文件上传的一般逻辑应该是点击文件上传,将文件在后台做相应的处理后将存储的Url返回添加到form表单中,跟随form表单一起提交到数据库中。.on()方法为fileInput上传文件后的回调方法,之后对返回的数据处理即可。
[javascript] view plain copy
- function initFileInput(ctrlName,uploadUrl) {
- var control = $('#' + ctrlName);
- control.fileinput({
- language: 'zh', //设置语言
- uploadUrl: uploadUrl,
- showUpload: true, //是否显示上传按钮
- showRemove:true,
- showPreview : true,
- dropZoneEnabled: false,
- showCaption: true,//是否显示标题
- allowedPreviewTypes: ['image'],
- allowedFileTypes: ['image'],
- allowedFileExtensions: ['jpg', 'png', 'gif'],
- maxFileSize : 2000,
- maxFileCount: 1,
- //initialPreview: [
- //预览图片的设置
- // "",
- //],
- }) }
- $(document).ready(function () {
- var path = rootPath + "/lecturer/picture/upLoad.shtml";
- initFileInput("JSh_ZhP",path);
- $("#JSh_ZhP").on("fileuploaded", function (event, data, previewId, index) {
- $("#JSh_ZhP_Path").val(data.response);
- });
- });
后台处理的代码,我直接将文件存在了本地并将路径返回。
[java] view plain copy
- @ResponseBody
- @RequestMapping("picture/upLoad")
- public String upLoad(@RequestParam("file")CommonsMultipartFile file)
- throws Exception{
- String path="E:/images/"+new Date().getTime()+file.getOriginalFilename();
- File newFile = new File(path);
- file.transferTo(newFile);
- Map<string> map = new HashMap<string>(); /<string>/<string>
- map.put("pathUrl", path);
- JSONArray json = JSONArray.fromObject(map);
- return path;
- }
到这里大家应该学会了fileinput的使用,如有问题请留言
閱讀更多 程序員小新人學習 的文章