多个表单中如何获得这个文件上传的网址实现js代码

假设一个网页里有多个表单，其中一个表单里有文件上传，


代码如下:

<form action='http://xxx.com/data' method='post'>
<input type="text" name="data" />
<input type="submit" name="Submit2" value="上传数据">
</form>
<form action='...' ... >
...
</form>
...
<form action='...' ... >
...
</form>
<form action='http://xxx.com/upload' enctype='multipart/form-data' method='post'>
<input type="file" name="fileUpload"/>
<input type="submit" name="Submit2" value="上传文件">
</form>

问题是如何获得这个文件上传的网址呢？
下面是 JavaScript 代码示例


代码如下:

function showUploadUrl() {
for(var i=0; i<document.forms.length; i++) {
var form = document.forms[i];
for (var j=0; j<form.elements.length;j++){
if ( form.elements[j].type==="file") {
alert("上传地址是:" + form.action);
}
}
}
}

赞 (0)

相关推荐

  • javascript上传图片前预览图片兼容大多数浏览器

    复制代码 代码如下: <div id="localImag"><img id="preview" width="-1" height="-1" style="display:none" /></div> <asp:FileUpload ID="file_head" runat="server" onchange="j

  • js HTML5多图片上传及预览实例解析（不含前端的文件分割）

    本文实例为大家分享了js HTML5多图片上传及预览实例,供大家参考,具体内容如下 主要运用  1.HTML5 files可以选择多文件,以及获取多文件信息  2.XMLHTTPRequest对象,发送HTTP传输请求  3.将每一个文件放在FormData,进行传输  4.利用readAsDataURL将图片内容直接变成url,放在img标签的src当中,生成可预览的图片 html+css+js代码 <!DOCTYPE html> <head> <meta http-equ

  • 手机图片预览插件photoswipe.js使用总结

    手机图片预览photoswipe,支持pc图片预览,多用于android,ios的手机图片预览. 资源包:photoswipe-3.0.5 在photoswipe官网有1.0.11的包下载,但是1.0.11这个版本,存在缺陷,在部分android手机上,滑动一次的时候,会跳转2张图片  (正常情况下,滑动一次,跳转1张图片) 通常使用方法如下: 在html的head标签中依次加载资源包中如下文件: <script type="text/javascript" src="

  • JS HTML5拖拽上传图片预览

    JS HTML5拖拽上传图片预览

    1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部的原始数据块.总之,file对象包含与FlieList对象,而file对象继承于Blob对象! 各对象的相关属性关系: FileReader接口: 由图可知:HTML5还提供了FileReader接口:用于将文件读入内存,并读取

  • html5+javascript实现简单上传的注意细节

    html5+javascript实现简单上传的注意细节

    简单记录下今早做H5上传中一些代码还有坑 一.展示 因为前端上传文件是必须通过form表单的,不能使用ajax,这样的话一个移动页面放入一个type为file的input真心不怎么好看,如下图,很挫有没有 解决办法找了下,PC上有些是把这个input换成flash,采用jquery的工具库比如uploadify来做,但是移动端大部分浏览器是不支持flash的.所以最后采用的办法还是用form表单的形式,只是把这个form和input的透明度设置为0,让它们和准备显示的内容同时在一个div中,显示

  • javascript HTML5文件上传FileReader API

    文件上传功能现在是越来越普遍,所有的社交网站,媒体网站,比如优酷视频,微博等,都提供了上传图片,上传视频等功能.但过去WEB程序员都很清楚,用HTML表单上传文件是很麻烦的事情,特别是你想了解一下用户上传的文件的一些属性,必须等它上传完成后才能知道. 未知的东西上传到服务器上,有可能产生安全问题,也有可能体积太大,超过允许,浪费空间.现在好了,WEB技术在进步,HTML5带来了很多好东西.这个FileReader API就能让你在用户上传之前就能获取上传文件的一些基本属性. HTML代码 这个F

  • Nodejs+express+html5 实现拖拽上传

    Nodejs+express+html5 实现拖拽上传

    一.前言 文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传.给用户体验带来很大问题.html5开始支持拖拽上传的需要的api.nodejs也是一个最近越来越流行的技术,这也是自己第一次接触nodejs,在nodejs开发中,最常用的开发框架之一是expess,它是一个类似mvc模式的框架.结合html5.nodejs express实现了拖拽上传的功能. 二.基础知识普及 1.NodeJs基础知识 nodejs简单来说就是一个可以让j

  • javascript html5移动端轻松实现文件上传

    PC端上传文件多半用插件,引入flash都没关系,但是移动端要是还用各种冗余的插件估计得被喷死,项目里面需要做图片上传的功能,既然H5已经有相关的接口且兼容性良好,当然优先考虑用H5来实现. 用的技术主要是: ajax FileReader FormData HTML结构: <div class="camera-area"> <form enctype="multipart/form-data" method="post">

  • js HTML5 Ajax实现文件上传进度条功能

    本文实例介绍了js结合HTML5 Ajax实现文件上传进度条功能,分享给大家供大家参考,具体内容如下 1.  lib.js var Host = window.location.host; //--Cookie function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Days*24*60*60*1000); document.cookie = name +

  • 基于javascript html5实现多文件上传

    基于javascript html5实现多文件上传

    本文实例为大家分享了javascript html5实现多文件上传的实现方法,具体内容如下 HTML结构: <div class="container"> <label>请选择一个图像文件:</label> <input type="file" id="file_input" multiple/> </div> 顺便说下这个上传的主要逻辑: 用input标签并选择type=file,记得

随机推荐