做了很多的尝试,最后才在某位高手大叔的博客里,找到答案.
原先的实习思路是用样式控制的,让文件控件不显示出来,在另外一个按钮的点击事件里头调用她的onClick事件:代码如下:
xml 代码
- <form name="aForm" method="post" >
- <input type="file" name="filepath" class="ap" >form>
- function chooseFile(){
-
- var aForm=document.forms['aForm'];
- aForm.filepath.click();
- var filepath=aForm.filepath.value;
- if(filepath==""){
- alert("你没有选择文件");
- }else {
- aForm.submit();
- }
-
- }
后果是:提交到后,得不到文件路径.原因是,file这个控件,它不能由让其他的控件触发它,不然得不到值.所以白做了.
后来,项目经理给了个思路,用动态生成的file控件试下,结果,还是不行.因为file控件,是只读的,不能通过其它的方式赋值,只有自己控件本身才能. 所以还是不行.
后来:哈哈~用透明的.既然隐藏不行,动态也不行,那就玩下透明的总可以吧...HOHO..具体代码如下:
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <title>本窗口将被用于提交文件, 在父窗口再生成一个文件上传按钮title>
- <style>
- .alpha{position: absolute;
- top: 0px; font-size: 44px;
- left: -640px; -moz-opacity:0;
- filter:alpha(opacity: 0); opacity: 0;}
- .imgP{position: absolute; left: 0px; top: 0px;}
-
- style>
- <script language="JavaScript">
- window.do_upload = function(n) {
- var filename=document.getElementById('upload').value;
- if(document.getElementById('upload').value == '') return;
- if(n==0){
-
- document.getElementById('upload_display').style.display = 'none';
- document.getElementById('upload_ndisplay').style.display = 'block';
-
-
- }else if(n==1){
- document.getElementById('upload_display').style.display = 'block';
- document.getElementById('upload_ndisplay').style.display = 'none';
-
- }
- var l = filename.split(/[\/\\]/),
- filename = l[l.length - 1];
- parent.doSendInfo(filename);
- document.forms[n].submit();
- };
- script>
- head>
- <body style="padding: 0px; margin: 0px; vertical-align: middle; text-align: center;">
- <span id="upload_display">
- <img src="<!---->/images/im/topimg/sendfile.gif" class="imgP"/>
- <form action="<!---->/chat/file.shtml?method=doFile" method="post" enctype="multipart/form-data">
- <input id="upload" name="upload" type="file" onchange="do_upload(0)" class="alpha"/>
- span>
-
- <span id="upload_ndisplay" style="display: none;" >
- <img src="<!---->/images/im/topimg/sendfile.gif" class="imgP"/>
- <form action="<!---->/chat/file.shtml?method=doFile" method="post" enctype="multipart/form-data">
- <input id="upload" name="upload" type="file" onchange="do_upload(1)" class="alpha" />form>
- span>
- body>
- html>
这是调用的部分:
- <iframe id=imgForm name=imgForm src="<!---->/chat/file.shtml?method=upload"
- border="0" frameborder="no" style="width:27px; height:30px;" scrolling="no" >iframe>
用了两个file控件,因为第一个提交后,让另外一个代替它.还是返回原来的界面~这样,在用户看来,那个按钮好象没变一样~哈哈~
分享到：
相关推荐
本篇文章将详细讲解如何在layui中实现一个页面上使用多个独立的文件上传按钮，以及相关的配置和注意事项。 首先，layui的upload组件是基于HTML5的File API构建的，支持多文件选择、预览、上传进度显示等功能。在...
总的来说，图片和文件上传的前端实现涉及到HTML表单、jQuery事件监听、FileReader API、FormData对象、Ajax异步请求以及可能的自定义组件。同时，后端服务器也需要提供相应的接口来配合前端完成整个上传流程。
本篇将详细介绍一个基于Ajax实现的“单按钮文件上传插件”。 这个插件的核心特性在于它仅仅使用一个按钮就实现了文件上传的功能，既简洁又高效。在传统的文件上传方式中，用户通常需要点击按钮选择文件，然后再次...
WebUploader是百度推出的一款强大的文件上传...通过以上方法，你可以实现一个高效且美观的多按钮文件上传系统，同时保证在多个浏览器环境下正常运行。记得在实际应用中，根据具体需求调整和优化代码，以提高用户体验。
本教程将详细讲解如何使用AjaxUpload控件，结合C#后端处理和jQuery前端库，实现一个单个按钮即可完成图片上传的功能，且无需使用传统的`<input type="file">`文件选择框。 首先，我们需要理解AjaxUpload的工作原理...
Bootstrap文件上传组件FileInput是一款强大的前端文件上传工具，尤其适合于需要实现文件批量上传的场景。这个组件基于Bootstrap框架，提供了美观的用户界面和丰富的功能，使得文件上传操作变得直观且易于实现。以下...
PHP CMS v9在设计时可能依赖于Flash来处理文件上传，导致在当前环境下，当尝试上传图片时，按钮无响应。 要解决这个问题，我们需要将原有的基于Flash的图片上传插件替换为HTML5的图片上传插件。HTML5提供了File API...
### C#实现文件上传的关键知识点 #### 一、概述 在C#中实现文件上传是一项常见但非常重要的功能，尤其对于Web应用来说更是如此。本文将深入探讨如何使用C#来实现文件上传，并重点关注以下几个方面：如何利用C#进行...
本文将深入探讨如何在WebAPI中实现文件上传功能，并介绍如何在MVC应用程序中调用这个API。 一、WebAPI中的文件上传 1. **配置路由**：首先，我们需要在WebAPI的`WebApiConfig.cs`文件中设置允许接收多部分/表单...
以下是一个基本的代码示例，展示了如何使用Bootstrap和JavaScript实现带预览功能的文件上传按钮： ```html *"> 选择文件 ; max-height: 200px; display: none;"> ``` ```javascript document.getElementById('...
在现代Web应用开发中，文件上传是一个非常常见的需求，尤其是在涉及图片、文档等多媒体数据的应用场景下。为了提高用户体验，异步上传技术得到了广泛的应用。本文将深入探讨如何使用Java实现多文件的异步上传功能。 ...
传统的文件上传方式通常只允许用户选择一个文件，但随着技术的发展，现在我们可以实现多选文件上传功能，让用户能够一次性上传多个文件，极大地提高了用户体验。本教程将探讨如何在网页中实现多选文件上传，基于提供...
在本项目“layui实现文件压缩上传”中，我们重点关注的是如何利用layui的上传组件结合JavaScript技术来处理大图片的压缩，以优化文件上传性能和降低服务器存储负担。以下是对这个知识点的详细阐述： 1. **layui上传...
- **文件上传处理**：当用户选择文件后，可能需要将其上传到服务器。这通常涉及HTTP的POST请求，后端接收到文件流后进行存储。 - **文件访问接口**：后端需要提供一个接口，供前端请求文件内容。这个接口可以返回...
8. **异步处理**: 为了提高性能，多文件上传可能采用异步处理，一次上传一个文件，而不是一次性上传所有文件。这可以避免内存溢出问题，并确保上传的稳定性和可靠性。 9. **错误处理与重试机制**: 当上传过程中发生...
本篇文章将深入探讨如何使用Spring Boot实现文件上传功能，包括设置服务器端口、定义文件存储路径以及如何在前端展示所上传的图片。 首先，我们需要在Spring Boot项目中引入所需的依赖。对于文件上传，我们通常会...
本主题主要探讨如何在KindEditor中实现多图上传功能，并解决因移除Flash导致的选择图片按钮无法展示的问题，同时添加上传后的图片结果展示。 一、多图上传功能 多图上传是现代富文本编辑器必备的功能之一，它允许...
Bootstrap FileInput 是一个流行的前端文件上传插件，它与 Bootstrap 框架完美结合，提供了丰富的功能和美观的用户界面。这个插件不仅支持单选文件上传，还支持多选，以及预览不同类型的文件（如图片、文档、音频、...
3. **文件上传**：CKEditor通过Ajax或IFrame方式将图片数据发送到服务器端的一个处理程序，通常是Servlet。 4. **服务器处理**：后端Servlet接收上传请求，对文件进行验证（如文件类型、大小限制），并将其保存在...
总的来说，Uploadify 3.2是一个强大且易用的文件上传解决方案，它简化了前端文件上传的实现，同时也提供了高度的定制性，能够满足各种复杂的项目需求。无论你是初学者还是经验丰富的开发者，都能从中受益。