ajax出发fileinput.js,图片预览上传插件bootstrap-fileinput.js

ab5c080b78353f9271abd34058c59c83.png

c714816320c3c7678952c0af200e40b9.png

插件描述:bootstrapfileinput预览上传图片并使用FmData上传,上传url根据实际情况填写

更新时间:2017/12/22 下午5:12:09

更新说明:修改错误,之前把form标签id和enctype写到div上了

引入css

引入js

$(function() {

//比较简洁,细节可自行完善

$('#uploadSubmit').click(function() {

var data = new FormData($('#uploadForm')[0]);

$.ajax({

url: 'xxx/xxx',

type: 'POST',

data: data,

async: false,

cache: false,

contentType: false,

processData: false,

success: function(data) {

console.log(data);

if (data.status) {

console.log('upload success');

} else {

console.log(data.message);

}

},

error: function(data) {

console.log(data.status);

}

});

});

})

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
fileinput.js 是一个开源的 JavaScript 库,用于在 web 页面上实现单文件上传功能。使用该库可以实现以下功能: 1. 支持多种文件类型,包括图片、视频、音频、文档等; 2. 支持文件拖放上传和浏览器文件选择上传; 3. 支持文件预览功能,可以在上传预览文件; 4. 支持文件大小限制和文件数量限制; 5. 支持上传进度条显示; 6. 支持自定义上传路径和文件命名规则。 下面是一个简单的示例代码,演示如何使用 fileinput.js 实现单文件上传功能: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>单文件上传</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.9/css/fileinput.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.9/js/fileinput.min.js"></script> </head> <body> <div class="container"> <h3>单文件上传</h3> <input id="file" type="file" name="file" data-show-preview="true"> </div> <script> $(document).ready(function() { $("#file").fileinput({ uploadUrl: "/upload", allowedFileExtensions: ['jpg', 'png', 'gif'], maxFileSize: 1000, maxFilesNum: 1 }); }); </script> </body> </html> ``` 在上面的代码中,我们引入了 fileinput.js 和 jQuery 库,然后创建了一个文件选择框,并将其初始化为 fileinput 组件。在初始化时,我们指定了上传路径、允许上传的文件类型、文件大小限制和文件数量限制。 开发人员需要根据自己的实际需求进行配置和开发。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值