多个表单中如何获得这个文件上传的网址实现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);
}
}
}
}
相关推荐
-
JS HTML5拖拽上传图片预览
1.文件API:(File API) file类型的的表单控件选择的每一个文件都是一个file对象,而FileList对象则是这些file对象的集合列表,代表所选择的所有文件.file对象继承于Blob对象,该对象表示二进制原始数据,提供slice方法,可以访问到字节内部的原始数据块.总之,file对象包含与FlieList对象,而file对象继承于Blob对象! 各对象的相关属性关系: FileReader接口: 由图可知:HTML5还提供了FileReader接口:用于将文件读入内存,并读取
-
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
-
Nodejs+express+html5 实现拖拽上传
一.前言 文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传.给用户体验带来很大问题.html5开始支持拖拽上传的需要的api.nodejs也是一个最近越来越流行的技术,这也是自己第一次接触nodejs,在nodejs开发中,最常用的开发框架之一是expess,它是一个类似mvc模式的框架.结合html5.nodejs express实现了拖拽上传的功能. 二.基础知识普及 1.NodeJs基础知识 nodejs简单来说就是一个可以让j
-
javascript HTML5文件上传FileReader API
文件上传功能现在是越来越普遍,所有的社交网站,媒体网站,比如优酷视频,微博等,都提供了上传图片,上传视频等功能.但过去WEB程序员都很清楚,用HTML表单上传文件是很麻烦的事情,特别是你想了解一下用户上传的文件的一些属性,必须等它上传完成后才能知道. 未知的东西上传到服务器上,有可能产生安全问题,也有可能体积太大,超过允许,浪费空间.现在好了,WEB技术在进步,HTML5带来了很多好东西.这个FileReader API就能让你在用户上传之前就能获取上传文件的一些基本属性. HTML代码 这个F
-
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 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移动端轻松实现文件上传
PC端上传文件多半用插件,引入flash都没关系,但是移动端要是还用各种冗余的插件估计得被喷死,项目里面需要做图片上传的功能,既然H5已经有相关的接口且兼容性良好,当然优先考虑用H5来实现. 用的技术主要是: ajax FileReader FormData HTML结构: <div class="camera-area"> <form enctype="multipart/form-data" method="post">
-
html5+javascript实现简单上传的注意细节
简单记录下今早做H5上传中一些代码还有坑 一.展示 因为前端上传文件是必须通过form表单的,不能使用ajax,这样的话一个移动页面放入一个type为file的input真心不怎么好看,如下图,很挫有没有 解决办法找了下,PC上有些是把这个input换成flash,采用jquery的工具库比如uploadify来做,但是移动端大部分浏览器是不支持flash的.所以最后采用的办法还是用form表单的形式,只是把这个form和input的透明度设置为0,让它们和准备显示的内容同时在一个div中,显示
-
基于javascript html5实现多文件上传
本文实例为大家分享了javascript html5实现多文件上传的实现方法,具体内容如下 HTML结构: <div class="container"> <label>请选择一个图像文件:</label> <input type="file" id="file_input" multiple/> </div> 顺便说下这个上传的主要逻辑: 用input标签并选择type=file,记得
-
手机图片预览插件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="
随机推荐
- Redis集群搭建全记录
- Android中控制和禁止ScrollView自动滑动到底部的方法
- AngularJS基础 ng-list 指令详解及示例代码
- AngularJS中transclude用法详解
- Java实现MD5加密的方法
- iOS开发中Date Picker和UITool Bar控件的使用简介
- python 解析html之BeautifulSoup
- javascript实现倒计时(精确到秒)
- PHP 小心urldecode引发的SQL注入漏洞
- 十条建议帮你提高Python编程效率
- c#定时运行程序分享(定时程序)
- 零基础学习AJAX之AJAX的简介和基础
- ASP调用远程XML数据的代码(alexa排名数据)
- Javascript中使用parseInt函数需要注意的问题
- python实现的简单抽奖系统实例
- BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
- js学习笔记之事件处理模型
- js浮点数精确计算(加、减、乘、除)
- 用rsync对网站进行镜像备份步骤
- 详谈Android编译命令