`
心动音符
  • 浏览: 336907 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

通过JS构造上传文件的form表单

阅读更多
在上传文件时,我们都知道需要在form表单中加上enctype="multipart/form-data"。而在开发过程中,也有可能遇到需要用javascripts构造form表单的情况。一般javascript构造form,可以使用以下方法:

var form = document.createElement('form');
form.id="the_form"; 
form.action="/img.php";
form.method='post';
form.name="the_form_"; 


  当javascript构造的form,遇到需要上传文件的时候,本以为直接加一句form.enctype="multipart/form-data"就能解决问题,却发现满不是那么回事。从网上搜了一些原因,最终找到解决原因,原来javascript的form的对象名并不应该是enctype,而应该是encding,改为form.encding="multipart/form-data",问题解决。

  将表单放到HTML标签中可以使用以下代码:

var parNode = document.getElementById("plus");
parNode.appendChild(form);//在plus中增加form表单,plus为html中的一个层

  表单中也可以放入input、checkbox等表单,可以使用以下代码,通过表单的对象可以改变表单的类型和值:
var input=document.createElement("input");
input.id="upfile_1";
input.name="upfile_1";
input.type="file";
input.className="file_upload";
input.onchange=function (){//点击表单时调用upload_pic()函数
     upload_pic();
}
form.appendChild(input);//在form中追加input表单
分享到:
评论

相关推荐

    不用form提交表单,用ajax上传文件

    "不用form提交表单,用ajax上传文件"是这种需求的一个典型场景。这种方式可以让用户在上传文件时无需等待页面刷新,而是通过Ajax(Asynchronous JavaScript and XML)技术实现实时反馈,提升交互体验。 在JDK 8版本...

    解决java enctype multipart form-data文件上传传值问题

    - **安全性**:确保上传文件的合法性,防止恶意文件上传。 - **资源管理**:合理配置最大文件大小、内存使用限制等,避免资源耗尽。 - **错误处理**:完善错误处理机制,确保程序的健壮性。 综上所述,理解并掌握`...

    java导入导出全部文件jar包,ajax提交form表单返回提示数据

    在form表单提交中,如果希望使用Ajax,你需要阻止表单的默认提交行为,然后使用JavaScript手动构造并发送Ajax请求。同时,你需要在后端设置接收和处理这些请求的接口。例如,在Spring MVC框架中,你可以定义一个...

    JavaScript动态创建form表单并提交的实现方法

    4. 将创建好的表单控件通过appendChild方法添加到<form>元素中。 5. 使用appendchild方法将整个form元素添加到文档的body或者其他指定的父元素中。 6. 通过调用form元素的submit方法来提交表单。 7. 提交表单后,...

    WebAPIFileUploadDemo通过multipart/form-data方式同时上传文件以及数据包含客户端上传例子

    在开发Web应用时,有时我们需要实现用户通过网页上传文件并同时提交相关数据的功能。WebAPIFileUploadDemo是一个示例项目,展示了如何使用ASP.NET Web API处理这种类型的数据传输,特别是利用`multipart/form-data`...

    利用Vue构造器创建Form组件的通用解决方法

    为了解决这些问题,我们可以利用Vue构造器Vue.extend创建一个通用的Form组件,将其转换为一个方法,根据需求动态挂载和注销。 首先,让我们看看如何使用Vue.extend构建一个通用的表单组件。表单组件通常包含若干个...

    ajax异步文件上传,servlet处理

    在现代Web应用中,用户经常需要上传文件,如图片、文档等。为了提供更好的用户体验,开发者通常会采用AJAX(Asynchronous JavaScript and XML)技术实现异步文件上传,避免传统方式下页面刷新带来的中断感。AJAX允许...

    bootstrap表单构造器

    - **示例**:可能包含演示如何使用此表单构造器的示例文件,帮助开发者快速上手。 - **文档**:可能有README文件或其他文档,解释安装步骤、使用方法和API参考。 CodeIgniter是一个强大的PHP框架,它简化了服务器端...

    文件上传的两种情况及mock时对应处理办法

    这是最传统的文件上传方式,通过HTML的`<form>`标签,设置`enctype="multipart/form-data"`,使表单数据以二进制格式传输。用户选择文件后,浏览器会将文件内容封装到HTTP请求中,服务器端通过解析请求体来获取文件...

    VFP上传文件到web服务器

    - 设置请求头,比如Content-Type为multipart/form-data,表示上传文件:`xmlHttp.setRequestHeader("Content-Type", "multipart/form-data")` - 将文件内容转换为二进制流,写入请求体:`xmlHttp.Send(fileData)` - ...

    springmvc上传文件controller,vue

    同时,确保前端和后端的安全性,比如使用CSRF令牌防止跨站请求伪造,以及对上传文件进行适当的权限控制。 最后,项目中的"新建文件夹"可能表示在服务器端需要创建一个目录来存储上传的文件。你可以使用Java的`java....

    java实现多文件异步上传

    此时,可以直接通过`FormData`构造函数将整个`<form>`对象作为参数传入,从而自动获取所有表单字段的值。 ```javascript function test() { var formData = new FormData($("#formId")[0]); var upload_url = ...

    C代码版本的HTTP POST上传文件/JSON

    3. **文件上传**:在HTTP POST请求中上传文件,需要将文件内容编码成二进制流,并在Content-Type头中指定`multipart/form-data`。每个文件都应包含一个边界标识符,以区分不同的文件或字段。 4. **JSON数据**:JSON...

    基于bootstrap的动态表单的实现

    动态表单的核心是其背后的逻辑,这通常涉及JavaScript或jQuery来处理用户的交互和数据验证。例如,可以使用事件监听器(如`change`、`click`)来实时更新表单状态,或者在用户提交表单时进行数据验证。 此外,...

    vue查询表单导出excel文件所需的js文件excel.zip

    "vue查询表单导出excel文件所需的js文件excel.zip" 包含了实现这一功能所必要的JavaScript库和可能的配置文件。以下是关于这个主题的详细知识点: 1. **Vue.js**: Vue.js 是一个轻量级的前端框架,它允许开发者以...

    C# 多文件上传

    总之,C#中的多文件上传涉及到服务器和客户端的交互,包括HTML表单、HTTP协议、C#后端处理以及前端的JavaScript处理。在实现过程中,需要关注性能、用户体验和安全性等多个方面,确保功能的稳定性和可靠性。通过理解...

    用js创建form表单并提交.docx

    在示例中,虽然没有直接展示`<form>`元素,但通过`id="search"`的`<form>`元素可以推断,有一个用于搜索的表单存在。 2. **JavaScript表单操作**:JavaScript可以用来操作表单,包括添加、删除、修改表单元素,以及...

    java上传文件

    上传文件前,可能需要先将本地文件读入内存,这可以通过`BufferedReader`或`FileInputStream`配合`byte[]`数组实现。 2. HTTP协议:上传文件通常涉及HTTP的POST请求,特别是当文件上传发生在Web应用中时。HTTP协议...

    jquery.form.js jquery 表单插件

    jquery 表单插件 可以异步上传表单内容 不用直接构造

    spring boot 文件上传实例

    在Spring Boot框架中,文件上传是一项常见的功能,它允许用户通过Web应用程序上传各种类型的文件,如图片、文档等。在本实例中,我们将探讨如何在Spring Boot中实现一个简单的文件上传功能。 首先,我们需要在...

Global site tag (gtag.js) - Google Analytics