form文件上传,防止页面刷新

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传form提交</title>
</head>
<body>
<form id="form" method="post" enctype="multipart/form-data" target="iframe" action="upload.php">
<p>Upload File: <input type="file" name="Filedata" /></p>
<p><input type="submit" value="Submit" id="submit"/></p>
</form>
<iframe name="iframe" style="display:none;" id="iframe" ><p></p></iframe>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#submit").click(function(){
$("#form").submit();
});

var iframe = document.getElementById(‘iframe‘);
var repose="";
if(iframe.attachEvent){//ie
iframe.attachEvent("onload", function(){
var win1 = document.getElementById(‘iframe‘).contentWindow;
repose= win1.document.body.innerHTML ;
repose=eval(‘(‘ + repose + ‘)‘);
$("#form").append("<div><img src=‘"+repose.data.img+"‘/></div>");
});
}else{//chrome,ff
iframe.onload = function(){
var win2 = document.getElementById(‘iframe‘).contentWindow;
repose= win2.document.body.innerHTML ;
repose=eval(‘(‘ + repose + ‘)‘);
$("#form").append("<div><img src=‘"+repose.data.img+"‘/></div>");
};
}

});
</script>
</body>
</html>

form文件上传,防止页面刷新

时间: 2024-11-06 07:58:14

form文件上传,防止页面刷新的相关文章

from表单文件上传后页面跳转解决办法

from表单上传文件,路径跳转后,又不能转发回来. 本人的一个解决办法是.返回一段html代码,浏览器解析后后退一步,回到原来的页面并刷新. return "<html><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"/></head><body onload='JavaScript:history.

【JSP】文件上传局部刷新

看到局部刷新,大家联想到的肯定是Ajax,但实际上,Ajax是没有办法实现文件上传的局部刷新的.由于安全性的需要,JavaScript代码是不能访问客户端文件系统,所以通过XMLHttpRequest的请求参数是无法得到上传文件的内容的,只能得到文件名. 那么我们又是怎样实现文件上传局部刷新的呢?其实我们再上传文件的时候采用的还是同步方式,为了不刷新整个页面,我们需要用到隐藏的iframe,我们在页面上增加一个隐藏的<iframe>元素,该元素将会作为提交表单的target. 文件上传要求表单

form里面文件上传并预览

其实form里面是不能嵌套form的,如果form里面有图片上传和其他input框,我们希望上传图片并预览图片,然后将其他input框填写完毕,再提交整个表单的话,有两种方式! 方式一:点击上传按钮的链接弹出上传页面,上传文件,上传完毕再返回表单页面:这种比较简单,其实就是表单页面的上传按钮仅仅是一个链接,仅用于打开上传文件的弹出页面: 方式二:就是表单里面有<input type="file" name="picture"/>,点击上传按钮后,会在上传

【原创】用JAVA实现大文件上传及显示进度信息

用JAVA实现大文件上传及显示进度信息 ---解析HTTP MultiPart协议 一. 大文件上传基础描述: 各种WEB框架中,对于浏览器上传文件的请求,都有自己的处理对象负责对Http MultiPart协议内容进行解析,并供开发人员调用请求的表单内容. 比如: Spring 框架中使用类似CommonsMultipartFile对象处理表二进制文件信息. 而.NET 中使用HtmlInputFile/ HttpPostedFile对象处理二进制文件信息. 优点:使用框架内置对象可以很方便的

struts——文件上传

上传文件在一个系统当中是一个很常用的功能,也是一个比较重要的功能.今天我们就一起来学习一下Struts2如何上传文件. 今天讲的上传文件的方式有三种: 1,以字节为单位传输文件: 2,Struts2封装的一种方式: 3,以字符的方式传输文件. 其实这三种方式都差不 多,都是将文件先从客户端一临时文件的形式,传输到服务器的临时文件夹下,然后在将该临时文件复制到我们要上传的目录.另外,有一个需要注意,就是上传过 程中产生的这些临时文件,Struts2不会自动清理,所以我们需要手动清理临时文件,这一个

用jspSmartUpload组件实现文件上传、下载

jspSmartUpload组件,可从http://download.csdn.net/user/dearchuansir下载,压缩包的名字是jspSmartUpload.zip.下载后,将其解压到Tomcat的webapps目录下.解压后,将webapps/jspsmartupload目录下的子目录Web-inf名字改为全大写的WEB-INF,这样一改jspSmartUpload类才能使用.如果想让Tomcat服务器的所有Web应用程序都能用它,必须做如下工作: 1.进入命令行状态,将目录切换

struts2 文件上传下载

四.文件的上传(拦截器)和下载(stream结果类型)(需要练一遍) 1.文件上传 必要前提: a.表单method必须是post: b.enctype取值必须是multipart/form-data: c.提供文件选择域. 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <%@ taglib uri="/struts-t

C# asp.net实现文件上传

前端代码: 使用visual studio开发实现文件上传 前端页面代码: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="scientist.WebForm1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio

Spring mvc文件上传与下载

文件上传 SpringMVC实现文件上传,需要再添加两个jar包.一个是文件上传的jar包,一个是其所依赖的IO包.这两个jar包,均在Spring支持库的org.apache.commons中. 单文件上传 jsp页面 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextP