实现单文件上传,页面局部刷新

实现单文件上传,页面不刷新

1.html

<form name="fjUploadForm" enctype="multipart/form-data" method="post"

action="fjFileInsert.action" onsubmit="return check()" target="fjUploadIFrame">

<input type="file" name="doc" value=""/>

<input type="submit" class="ybtn2" value="上传" />

</form>

<iframe id="fjUploadIFrame" name="fjUpload"   style= "display:none" onload="iframeOnLoad();" ></iframe>

<ul id="fj" class="fileList">

</ul>

fjFileInsert.action执行文件上传,然后返回数据到upLoad.html页面,upLoad.html页面在iframe中隐藏起来

当执行完毕,iframe会重新加载,这时触发iframe的onload事件,在onload事件中,处理一些后续的操作

2.upLoad.html

<input id="result" name="result" value="${model.message?default(‘‘)},${model.id?default(‘‘)},${model.fileName?default(‘‘)}"></input>

3.js

//防止在第一次触发iframe的onload事件

var doFlag = false;

//判断是否选择了需要上传的文件

function check(){

var file=document.forms["fjUploadForm"].doc;

if(file.value==""){

alert("请选择要上传的文件!");

file.focus();

return false;

}

doFlag = true;

return true;

}

//文件上传完毕后,触发iframe的onload事件,根据返回值,做一些后续的处理

function iframeOnLoad(){

if(doFlag){

var doc = window.frames["fjUploadIFrame"].document;

var text = doc.getElementById("result").value;

var arr = text.split(‘,‘);

var msg = arr[0];

if(msg == "1"){

alert("附件上传成功!");

AddLi("fj",arr[1],arr[2])

}else if(msg == "2"){

alert("上传的最大限制为[50MB]!\r\n上传失败!");

}else if(msg=="3"){

alert("上传的文件不存在,或文件输入格式有误!\r\n上传失败!");

}

else if(msg=="4"){

alert("上传的文件小于0kb,为空文件,请从新选择!");

}

doFlag = false;

}

}

//getContent.action实现文件的下载

function AddLi(targetId,id,name){

$("#"+targetId).append("<li><input type=‘hidden‘ value=‘"+id+"‘><input type=‘hidden‘ value=‘"+name+"‘><a href=‘${base}/getContent.action?id="+id+"‘ class=‘btn‘>"+name+"</a><img src=‘page8/images/icon/del.gif‘ onclick=‘delFj(this);‘/></li>");

}

function deTr(obj){

$(obj).parent().parent().remove();

}

时间: 2024-10-22 13:29:54

实现单文件上传,页面局部刷新的相关文章

2014-07-23 利用ASP.NET自带控件实现单文件上传与下载

效果图 上传文件页面: 下载文件页面:  1.母版页site.Master <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="upAndDown.SiteMaster" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict/

Struts2单文件上传原理及示例

一.文件上传的原理 表单元素的enctype属性指定的是表单数据的编码方式,该属性有3个值: 1.application/x-www-form-urlencoded:这是默认编码方式,它只处理表单域里的value属性值,采用这种编码方式的表单会将表单域的值处理成URL编码方式. 2.multipart/form-data:这种编码方式的表单会以二进制流的方式来处理表单数据,这种编码方式会把文件域指定文件的内容也封装到请求参数里. 3.text/plain:这种方式主要适用于直接通过表单发送邮件的

SpringMVC实现单文件上传、多文件上传、文件列表显示、文件下载

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 本文详细讲解了SpringMVC实例单文件上传.多文件上传.文件列表显示.文件下载. 一.新建一个Web工程,导入相关的包 springmvc的包+commons-fileupload.jar+connom-io.jar+commons-logging,jar+jstl.jar+standard.jar 整个相关的包如下: 整个工程目录如下: 二.配置web.xml和SpringMVC文件

关于Struts2单文件上传

要实现Struts2框架的文件上传,需要用到2个jar包 commons-fileupload-1.2.2.jar commons-io-2.0.1.jar 由于文件解析Struts2内部已经帮我们做好了,大大降低了开发难度,我们只需要在Action里设置好对应的参数,目录进行使用即可. 来个小示例: upload.jsp 这个页面的表单有三点需要注意的: 1.表单必须使用post方式提交 2.表单编码类型 enctype="multipart/form-data"   3.<s

asp.net.mvc 的单文件上传和多文件上传的简单例子

首先打开vs2012,创建空的mvc4项目,名称为MVCStudy,选择基本模板 1)创建项目后,基本结构是这样的 2)建立对应的HomeController,视图index.fileupload.success.error页面 3)控制器源码 using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Web;using System.Web.Mvc;using Sys

springMVC数据校验与单文件上传

spring表单标签:    <fr:from/> 渲染表单元素    <fr:input/>输入框组件    <fr:password/>密码框组件标签    <fr:hidden/>隐藏框组件标签0    <fr:textarea/>多行输入框组件标签    <fr:radiobutton/>单选框组件标签    <fr:checkbox/>复选框组件标签    <fr:select/>下拉列表组件标签 

SpringMVC单文件上传、多文件上传、文件列表显示、文件下载(转)

林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 本文详细讲解了SpringMVC实例单文件上传.多文件上传.文件列表显示.文件下载. 本文工程免费下载 一.新建一个Web工程,导入相关的包 springmvc的包+commons-fileupload.jar+connom-io.jar+commons-logging,jar+jstl.jar+standard.jar 整个相关的包如下: 整个工程目录如下: 二.配置web.xml和Spr

PHP单文件上传原理及上传函数的封装

<?php //单文件上传函数的封装 //文件上传原理:将客户端的文件上传到服务器端,再将服务器端的临时文件移动到指定目录即可. //文件的方向:客户端-->服务器(临时文件)-->指定目录,当文件进入服务器时它就是临时文件了,这时操作中要用临时文件的名称tmp_name. //在客户端设置上传文件的限制(文件类型和大小)是不安全的,因为客户能通过源代码修改限制,所以在服务端这里设置限制. //设置编码为UTF-8,以避免中文乱码 header('Content-Type:text/ht

springMVC之单文件上传

springmvc对form表单的支持已经很成熟,仅仅两步: 配置支持文件上传的bean:org.springframework.web.multipart.commons.CommonsMultipartResolver  同时设置文件编码.单次提交表单上传文件最大字节数.以及写文件时使用的缓冲区大小 开发处理:handler[org.hy.ssm.web.controller.FormController.uploadOne(MultipartFile)]  Java代码   /** * @