无刷新上传文件

1.FormData

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
 <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

</head>
<body>
    <form id= "uploadForm">
          <p >指定文件名: <input type="text" name="filename" value= ""/></p >
          <p >上传文件: <input type="file" name="file"/></ p>
          <input type="button" value="上传" onclick="doUpload()" />
    </form>

     <script type="text/javascript">
         function doUpload() {
             var formData = new FormData($("#uploadForm")[0]);
             alert(JSON.stringify(formData));
             $.ajax({
                 url: ‘upload.aspx‘,
                 type: ‘POST‘,
                 data: formData,
                 async: false,
                 cache: false,
                 contentType: false,
                 processData: false,
                 success: function (returndata) {
                     alert(returndata);
                 },
                 error: function (returndata) {
                     alert(returndata);
                 }
             });
         }
         $(function () {

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

2.filereader

<html>
<head>
<title>File Reader</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body {
    text-align: center;
}
#demo_result img {
    border: 2px solid #369;
    padding: 3px;
}
p {
    padding: 20px 0;
}
.warn {
    font-weight: bold;
    color: red;
}
</style>
</head>
<body>
<p>
  <label>请选择一个图像文件:</label>
  <input type="file" id="demo_input">
</p>
<div id="demo_result"></div>
<script type="text/javascript">
    var result = document.getElementById("demo_result");
            var input = document.getElementById("demo_input");

            if(typeof FileReader === ‘undefined‘){
                result.innerHTML = "<p class=‘warn‘>抱歉,你的浏览器不支持 FileReader<\/p>";
                input.setAttribute(‘disabled‘,‘disabled‘);
            }else{
                input.addEventListener(‘change‘,readFile,false);
            }

            function readFile(){
                var file = this.files[0];
                if(!/image\/\w+/.test(file.type)){
                    alert("请确保文件为图像类型");
                    return false;
                }
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function(e){
                    result.innerHTML = ‘<img src="‘+this.result+‘" />‘
                }
            }
        </script>
</body>
</html>

3. Iframe

原理:将图片上传的页面放在iframe中,这样就可以在iframe中将图片提交到服务器而不需要页面刷新,提交成功后用脚本实现主页面显示上传的图片。

Default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function doUpload() {
            var theFrame = document.getElementById("uploadframe");
            if (theFrame) {
                theFrame = theFrame.contentWindow;
                theFrame.selectAndUpload();
            }
        }

        function callback(str) {
            var theImg = document.getElementById("imgResult");
            theImg.setAttribute("src", str);
        }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h1>
            Asp.net 异步上传示例</h1>
        <iframe src="PicUpload.aspx" id="uploadframe" style="display: none;"></iframe>
        <p>
            <input type="button" id="btnBrowser" value="选择文件" onclick="doUpload()" />
        </p>
        <h2>
            上传结果</h2>
        <p>
            <img alt="上传后的图片" id="imgResult" style="width: 400px" />
        </p>
    </div>
    </form>
</body>
</html>

PicUpload.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PicUpload.aspx.cs" Inherits="PicUpload" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function selectAndUpload() {
            var theFileUpload = document.getElementById("<%=fileUpload1.ClientID%>");
            theFileUpload.onchange = function () {
                var fileExt = theFileUpload.value.substr(theFileUpload.value.lastIndexOf("."));
                if (!fileExt.match(/\.jpg|\.png|\.gif/i))//验证一下是不是图片
                {
                    top.alert("只能上传jpg,png,gif图片。");
                }
                else {
                    var myForm = document.getElementById("<%=form1.ClientID%>");
                    myForm.submit();
                }
            }
            theFileUpload.click();
        }

        function callback(filePath) {
            top.callback(filePath);
        }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:FileUpload runat="server" ID="fileUpload1"></asp:FileUpload>
    </div>
    </form>
</body>
</html>

PicUpload.aspx.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class PicUpload : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack && fileUpload1.HasFile)
        {
            string path = Server.MapPath("~/upload/" + fileUpload1.FileName);
            fileUpload1.SaveAs(path);
            ClientScript.RegisterClientScriptBlock(this.GetType(), "callback", "callback(‘upload/" + fileUpload1.FileName + "‘)", true);
        }
    }
}

时间: 2024-10-12 19:47:47

无刷新上传文件的相关文章

iframe实现无刷新上传文件(转)

其实在ajax出现之前,web应用也可以是无刷新的,那时大多通过IFrame来做到这一点.当然Ajax出现之后,人们一窝蜂地投奔Ajax 的阵营了,iFrame 就乏人问津了.但是用iFrame来实现无刷新上传文件确实一个很好的选择. [1].[代码] [HTML]代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <html>   <body>      <form action="upload.jsp

隐藏iframe无刷新上传文件

首先ajax不能上传文件,这误导了我有段时间,今晚睡不着就照着说明做了个无刷新上传文件 其实原理很简单 <form enctype="multipart/form-data" method="POST" target="upload" action="http://localhost/class.upload.php" > <input type="file" name="upl

利用iframe无刷新上传文件的坑

原文:利用iframe无刷新上传文件的坑 页面里经常要用到文件上传的功能,而且要求页面不刷新,先说一下原理:页面里放一个file控件和submit按钮,外面用form表单包住,给form表单加上对应的属性值,action.method.entype.name,到这一步,能上传文件了,但是这样上传文件会刷新页面,这不是我们想要的.我们要的是文件上传时不刷新页面,那么也简单,在页面里放一个iframe,设置它的宽高为0,这里有两个坑: 1.需要设置iframe的name值与form的target属性

异步无刷新上传文件并且上传文件可以带上参数

关于异步上传文件并且带上参数,网上有很多关于这样的插件,而我最喜欢用的插件是ajaxfileupload.js,该插件的代码如下: /*   131108-xxj-ajaxFileUpload.js 无刷新上传图片 jquery 插件,支持 ie6-ie10    依赖:jquery-1.6.1.min.js   主方法:ajaxFileUpload 接受 json 对象参数   参数说明:   fileElementId:必选,上传文件域ID   url:必选,发送请求的URL字符串   fi

ajax jsp 无刷新上传文件

本文实现的文件上传也是无页面刷新的,可以说是一种"类似AJAX"方法 开始之前先说两句无关的,其实在ajax出现之前,web应用也可以是无刷新的,那时大多通过IFrame来做到这一点.当然Ajax出现之后,人们一窝蜂地投奔Ajax 的阵营了,iFrame 就乏人问津了.但是用iFrame来实现无刷新上传文件确实一个很好的选择. ps:Ajax技术基本上可以说是由google公司带起来的,但少Gmail中上传文件用的还是 IFrame,所以使用IFrame来上传文件是最好的选择. 我在这

web 开发之js---巧用iframe实现jsp无刷新上传文件

首先要说的就是 ajax 是无法实现上传文件的,可以想一下ajax与后台通信都是通过传递字符串,怎么能传递文件呢?其实出于安全考虑js是不能操作文件的,所以就不要再说用ajax来实现文件的上传了,这是不可能的.    而本文实现的文件上传也是无页面刷新的,可以说是一种"类似AJAX"方法.    开始之前先说两句无关的,其实在ajax出现之前,web应用也可以是无刷新的,那时大多通过IFrame来做到这一点.当然Ajax出现之后,人们一窝蜂地投奔Ajax 的阵营了,iFrame 就乏人

Ajax 无刷新上传文件插件 uploadify 的使用

在表单中无法直接使用 Ajax 上传文件,解决的思路可以是使用插件无刷新地上传文件,返回文件上传后的地址,然后把该地址作为 Ajax 的参数传递给服务器端进行数据库处理.可以使用 uploadify 插件来实现该思路. 官方网站:http://www.uploadify.com 文档地址:http://www.uploadify.com/documentation/ 插件有 Flash 版 和 HTML5 版,项目中用到的是 Flash 版. 下载 Demo 并解压: 其中 index.php

mvc中file无刷新上传文件

前言 上传文件应该是很常见必不可少的一个操作,网上也有很多提供的上传控件.今天遇到一个问题:input控件file无法进行异步无刷新上传.真真的感到别扭.所以就尝试这去处理了一下. 上传封装类: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.IO; using System.Web; n

js无刷新上传文件

传统的文件上传方式 <form action="" method="POST" enctype="multipart/form-data"> <input type="file" name="file"/> <input type="submit"/> </form> 在执行上传后,页面会跳转到action指定的地址. 一般用户需要使用无页

form表单无刷新上传文件

很多时候,我们上传完文件之后,不想当前页面跳转,或者是刷新一下.那么我们需要怎么做呢? 首先,我们用的是最简单的form表单上传,提交方式.代码如下 <!--大家注意到这个form的target的了么?这个target属性的值frameFile,是form之后的 iframe的name值,这样的写法是让当前的form表单在提交表单内容的时候转交给iframe中进行页面 中表单处理,并且不会产生当前页面跳转!--> <form id="uploadForm" class