asp.net 点击一个按钮弹出对话框选择文件然后选择文件完成之后就自动上传文件 input(file)
来源:互联网 发布:js移除class属性 编辑:程序博客网 时间:2024/05/18 02:31
通过<input type="file">控件来实现目标:点击一个按钮,然后弹出对话框让你选择文件,选择文件完成之后就自动上传,而无需再点击一个额外的按钮(例如命名为“上传”的按钮)。
说明:(1)input(file)控件的onchange事件处理函数貌似只能用javascript函数处理,而不能通过像asp:button控件一样用服务器端处理函数来处理。具体例子:<asp:button runat="server" onclick="服务器端处理函数">,而<input type="file" runat="server" onchange="服务器端处理函数">这样是无效果的。
(2)input(file)控件是无法通过代码触发onchange事件的,必须用户手点才能触发。
(3)input(file)控件只能实现一次一个文件上传。
实现思路:
我的思路是这样的,先创建一个"浏览文件"的button,然后再创建<input type="file">的控件(不过让其透明不可见),最后再建立一个"上传"button(也是不可见的)。在“浏览文件”的button上,我们就它的onmouseover事件添加一个javascript响应函数叫做floatFile(),该函数将不可见的<input type="file">控件移动到我们鼠标下面,然后,我们点击鼠标的时候,其实是点在<input type="file">控件上、从而跳出选择文件对话框。然后,我们就<input type="file">添加onchange事件响应(onchange="fireEvent(node, event)")。fireEvent(node, event)方法用来触发一个特定控件的特定事件,我们这里具体是用来触发“上传”button(不可见)的onclick事件,然后再跳到该button的onclick“服务器端处理函数”。
总结起来,流程是这样的:onchange->(call)->fireEvent("上传按钮", click)->(call)“上传按钮”的onclick“服务器端处理函数”。通过这样的流程,我们就可以实现给input(file)控件的onchange事件"添加了""服务器端处理函数"。
我发个参考代码:(仅供参考,不保证该代码无错,因为这代码是我自己可以运行的代码经过我粗糙修改再上传的),全文关键在于我提供的思路。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="UploadExcelTest.Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>test one key upload file</title></head><body> <form id="form1" method="post" runat="server" enctype="multipart/form-data"> <p> <asp:button runat="server" id="uploadFileButton" onclick="uploadButtonClicked" text="上传" style="visibility: hidden; display: none;"/> </p> <div id="tt" style="position:relative;"> <input type="button" value="添加附件" onmouseover="floatFile()"/> <input type="text" id="selectedFileName" runat="server" value=""/> <br/> <div id="div1"> <input id="file1" name="myfile" type="file" onchange="showText(this)" style="position:absolute;filter:alpha(opacity=0);-moz-opacity:0;opacity: 0;width:30px;" hidefocus/> </div> </div> <script language="javascript" type="text/javascript"> function fireEvent(node, eventName) { // Make sure we use the ownerDocument from the provided node to avoid cross-window problems var doc; if (node.ownerDocument) { doc = node.ownerDocument; } else if (node.nodeType == 9) { // the node may be the document itself, nodeType 9 = DOCUMENT_NODE doc = node; } else { throw new Error("Invalid node passed to fireEvent: " + node.id); } if (node.fireEvent) { // IE-style var event = doc.createEventObject(); event.synthetic = true; // allow detection of synthetic events node.fireEvent("on" + eventName, event); } else if (node.dispatchEvent) { // Gecko-style approach is much more difficult. var eventClass = ""; // Different events have different event classes. // If this switch statement can't map an eventName to an eventClass, // the event firing is going to fail. switch (eventName) { case "click": // Dispatching of 'click' appears to not work correctly in Safari. Use 'mousedown' or 'mouseup' instead. case "mousedown": case "mouseup": eventClass = "MouseEvents"; break; case "focus": case "change": case "blur": case "select": eventClass = "HTMLEvents"; break; default: throw "fireEvent: Couldn't find an event class for event '" + eventName + "'."; break; } var event = doc.createEvent(eventClass); var bubbles = eventName == "change" ? false : true; event.initEvent(eventName, bubbles, true); // All events created as bubbling and cancelable. event.synthetic = true; // allow detection of synthetic events node.dispatchEvent(event); } } function $(id) { return document.getElementById(id); } //全局变量,记录文件数; var fileNum = 1; //mouseover时,把input file移到按扭上,保证点击的是file, function floatFile() { $("file" + fileNum).style.posTop = event.srcElement.offsetTop; $("file" + fileNum).style.posLeft = event.x - $("file" + fileNum).offsetWidth / 2; } //选择完一个文件之后,自动创建一个新的div 和 file表单,用于下回使用,hidden刚用过的file function showText(obj) { $("file" + fileNum).style.display = 'none'; fileNum = fileNum + 1; //set input(text) showing the file name getFileName(obj.value); //fire event //click the button "上传" fireEvent($("uploadFileButton"), "click"); //直接追加innerHTML(innerHTML+=)会清空原来file中的内容 $("div" + (fileNum - 1)).insertAdjacentHTML('afterend', '<div id="div' + fileNum + '"><input id="file' + fileNum + '" name="myfile" type="file" onchange="showText(this)" style="position:absolute;filter:alpha(opacity=0);-moz-opacity:0;opacity: 0;width:30px;"hidefocus></div>'); } function getFileName(path) { var _fileName = path.substring(path.lastIndexOf('\\') + 1, path.size); $("selectedFileName").value = _fileName; } </script> </form></body></html>
代码是为了加深对于思路的理解或者说是吸收。代码也许有错。至于再服务器端保存、修改上传上来的文件,在此不再多述,请谷歌之。
仅以此文献给和我一样为了一键上传文件而纠结了好久的新手们,大神一笑而过即可。(本文仅试验过input(file)控件,也许有其他控件能轻易实现,请大神不吝赐教)
- asp.net 点击一个按钮弹出对话框选择文件然后选择文件完成之后就自动上传文件 input(file)
- 不用点击file类型的input弹出文件选择对话框
- asp.net 浏览按钮 asp.net C# 如何点击按钮弹出选择文件对话框
- layUI中点击按钮选择图片(不自动上传),然后点击上传按钮,上传图片(可以上传多个文件)
- 如何点击a标签, 弹出input file 上传文件对话框
- <input type='file'>选择文件后自动上传文件
- C#+Emgucv通过点击按钮弹出选择文件对话框
- C#+Emgucv通过点击按钮弹出选择文件对话框
- Js 点击按钮 选择文件后 自动上传文件
- input file 选择文件之后的校验
- MFC点击按钮打开文件选择对话框
- 点击按钮,选择文件
- 如何在JSP页面中通过一个按钮,在对话框中选择一个目录而不是选择一个文件;input type=file只能选择一个文件,我想选择一个目录;做不出来项目经理要扣奖金的...............
- 单击MFC对话框中按钮弹出文件选择对话框
- input file文件上传CSS模拟为 选择 加 上传 两个按钮
- asp.net打开对话框选择文件路径
- 弹出对话框选择文件目录
- CFileDialog弹出文件选择对话框
- iOS即时语音聊天技术实践
- Working Practice-善于使用静态代码检查工具
- 一个程序员的创业历程——Writings.io诞生记原 Blog 地址:http://blog.chloerei.com/articles/75-writings-9-months-experienc
- Nginx 配置gzip,压缩js\css
- C++ 0x 之左值与右值、右值引用、移动语义、传导模板
- asp.net 点击一个按钮弹出对话框选择文件然后选择文件完成之后就自动上传文件 input(file)
- 使用TCPDF生成pdf,中文显示为问号
- Main函数和命令行参数
- C++中回调函数(CallBack)的使用
- Reset Image Size 图片转换缩放
- 关于海量数据处理问题
- Maximo学习笔记------多表级联更新
- 黑马程序员Java高新__枚举
- 励志电影收集---