fileinput实现文件上传

本文介绍了如何使用fileinput组件进行文件上传操作,包括前端js的实现和后台数据的接收与保存,最后展示了上传成功的实际效果。
摘要由CSDN通过智能技术生成

1.引入fileinput相关的css和js(如需要中文显示,则引入对应的中文js包)

2.前端js上传的主要实现方法如下:

$(function () {
			loadRole();	
			initFileInput("pic_path","../SalesImageController/SalesImageController_uploadFile.do");
		});
	  
		
	    //关闭
 		function cancle(){
 			history.back();
	    }
 		
	    
		
		

	   function initFileInput(ctrlName, uploadUrl) {  	    
            var control = $('#' + ctrlName); 
            control.fileinput({  
                resizeImage : true,  
                maxImageWidth : 200,  
                maxImageHeight : 200,  
                resizePreference : 'width',  
                language : 'zh', //设置语言  
                uploadUrl : uploadUrl,  
                uploadAsync : true,  
                allowedFileExtensions : [ 'png', 'jpeg', 'gif', 'jpg' ],//接收的文件后缀  
                showUpload : true, //是否显示上传按钮  
                showCaption : true,//是否显示标题  
                browseClass : "btn btn-primary", //按钮样式  
                previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",  
                maxFileCount : 10,  
                msgFilesTooMany : "选择文件超过了最大数量",  
                maxFileSize : 104857600, //设置最大上传值
                layoutTemplates:{
                	 actionDelete: '',//去除上传预览的缩列图中的删除图标	
                     actionUpload: '',//去除上传预览的缩列图中的上传图标	
                   //  actionZoom: '',//去除上传预览的缩列图中
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个使用 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。您可以在服务器端使用您喜欢的编程语言来处理上传的文件。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值