fileinput.js实现单文件上传
时间: 2023-12-09 08:03:34 浏览: 72
BootStrap fileinput.js文件上传组件实例代码
下面是一个使用 fileinput.js 实现单文件上传的简单示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>File Upload Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://raw.githubusercontent.com/gaarf/File-Input/master/js/fileinput.min.js"></script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/gaarf/File-Input/master/css/fileinput.min.css" />
</head>
<body>
<form>
<input id="fileinput" name="file" type="file" class="file">
<button type="submit">Upload</button>
</form>
<script>
$(document).ready(function() {
$("#fileinput").fileinput({
uploadUrl: "/upload",
maxFileSize: 1000,
allowedFileExtensions: ["jpg", "png", "gif"],
showUpload: false,
showCaption: false,
browseClass: "btn btn-primary",
fileType: "image"
});
});
</script>
</body>
</html>
```
在这个例子中,我们使用了 fileinput.js 库来实现文件上传。我们使用 `$("#fileinput").fileinput()` 函数来初始化文件上传插件。其中,`uploadUrl` 属性指定了文件上传的 URL,`maxFileSize` 属性指定了文件的最大大小,`allowedFileExtensions` 属性指定了允许上传的文件扩展名,`showUpload` 属性指定是否显示上传按钮,`showCaption` 属性指定是否显示文件名,`browseClass` 属性指定浏览按钮的样式,`fileType` 属性指定文件类型。
在表单提交时,文件将被上传到指定的 URL。您可以在服务器端使用您喜欢的编程语言来处理上传的文件。
阅读全文