点击按钮出现上传文件框

本文详细介绍了如何在HTML中插入隐藏的文件上传组件,并通过JavaScript实现打开上传窗口、处理上传文件及获取隐藏文本框的值。同时,利用SmartUpload进行文件上传处理,包括允许上传的文件类型、拒绝的文件类型、文件大小限制等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!-- 隐藏的文件上传组件,点击IMPORT时让该DIV显示即可-->
		<div id="upLoadForm" align="center" class="area" style="width:200 height:200 visibility:hidden">
		<form name="upform"  method="POST" enctype="multipart/form-data" target="myFrame"><!--target是为了能将处理于IFRAME中处理,实现无刷新-->
         <input type ="file" name="file" id="file"/>
		 <input type="hidden" name="textDatasImport" value="tt"><!--隐藏域,用于传递前台文本框信息-->
        <input type="button" value="上传" onclick="handle('import')"/>
         </form>
		</div>

 在HTML中插入此隐藏DIV

//打开上传窗口
function openUploadWin() 
{ 
    if(!bSelected)
	 {
	window.alert("请选择要导出的区域!");
	return;
	 }
  upLoadForm.style.left=document.body.scrollLeft+document.body.clientWidth/2-100;
  upLoadForm.style.top=document.body.scrollTop+document.body.clientHeight/2-100;
  /*upLoadForm.innerHTML=" <form name="upform"  method="POST" enctype="multipart/form-data">"
  +"<input type ="file" name="file" id="file"/>"
  +"<input type="button" value="上传" onclick="handle('import')"/>"
  +"</form>";
*/

 upLoadForm.style.visibility="visible";
  
} 

 以上是让上传框显示的JS代码

  document.upform.textDatasImport.value=value;//将值赋给上传文件隐藏文本框
			init();
		   upLoadForm.style.visibility="hidden";
           document.upform.action="importFromExcel";
		   document.upform.submit();

 点击上传按钮,执行上代码,则会将前台的value赋给upform的hidden文本框textDatasImport,并在后台进行处理

得到此值的方法

要用到SMARTUPLOAD

SmartUpload upload = new SmartUpload();
		try {
			upload.initialize(this.getServletConfig(), request, response);
			// 允许上传的文件类型
			upload.setAllowedFilesList("doc,xls,");
			// 拒绝上传的文件类型
			upload.setDeniedFilesList("exe,bat,jsp");
			// 允许上传文件的单个最大大小
			upload.setMaxFileSize(1024 * 1024 * 20);
			// 允许上传文件的最大大小总和
			
			// 上传数据
			upload.upload();

			StringBuffer fullFileName = null;// 保存到服务器上的文件名(带路径)
			File suFile = upload.getFiles().getFile(0);
			fullFileName = new StringBuffer("data.xls");// 填写 文件的路径
			suFile.saveAs(fullFileName.toString(), SmartUpload.SAVE_PHYSICAL);

		} catch (Exception e) {
			e.printStackTrace();
			return;
		}
       //获得FORM是文件上传时的隐藏域传值问题
		Request req = upload.getRequest();
		String texts = (String) req.getParameter("textDatasImport"); //即可得到数据

 

### 如何通过 Element 实现点击按钮触发文件上传 为了实现点击自定义按钮来触发动态文件上传功能,可以采用隐藏 `<input type="file">` 的方式,并结合 Vue 和 Element UI 提供的相关 API 来完成这一需求。 以下是具体的解决方案: #### HTML 结构 可以通过将 `input[type="file"]` 设置为不可见,并绑定到一个可见的按钮上。当用户点击按钮时,程序会模拟触发隐藏的输入点击事件[^3]。 ```html <el-button type="primary" @click="triggerFileUpload">导入</el-button> <input type="file" id="hidden-file-input" style="display: none;" @change="handleFileChange"> ``` #### JavaScript 方法 在方法部分,需要编写两个主要逻辑:一个是用于触发隐藏的文件选择器;另一个则是处理选中的文件并执行后续操作。 - **触发文件选择** 使用原生 DOM 操作或者架内置的方法让隐藏的文件选择控件弹出对话。 - **处理文件变化** 当用户选择了某个文件之后,应该捕获此动作以便进一步处理这些数据[^2]。 ```javascript methods: { triggerFileUpload() { const fileInput = document.getElementById('hidden-file-input'); if (fileInput) { fileInput.click(); } }, handleFileChange(event) { const files = event.target.files; if (files && files.length > 0) { console.log('Selected File:', files[0]); // 可在此处添加额外业务逻辑,比如预览或提交至服务器 this.uploadFile(files[0]); // 假设存在 uploadFile 函数 // 清除已选文件以支持重新选择相同名称的新版本文件 event.target.value = ''; } }, uploadFile(file) { let formData = new FormData(); formData.append('file', file); axios.post('/upload-endpoint', formData).then(response => { console.log('Upload Success:', response.data); }).catch(error => { console.error('Upload Failed:', error); }); } } ``` 上述代码片段展示了如何利用 Vue.js 组件配合标准 Web 技术达成目标[^1]^[]^。其中值得注意的是,在每次成功读取新档案后记得清空原始表单字段值以防重复选取同一份文档却未实际更新内容的情况发生。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值