jQuery ajax + ajaxfileupload.js插件 实现无刷新文件上传

最新推荐文章于 2024-05-05 03:24:38 发布
最新推荐文章于 2024-05-05 03:24:38 发布
阅读量2k 收藏
点赞数
分类专栏： asp.net Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huwei2003/article/details/51585536
版权

jQuery ajax + ajaxfileupload.js插件 实现无刷新文件上传


这里以上传图片为例，其它多媒体文件类似

==== aspx 页面部分代码如下 =====

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="InfoEdit.aspx.cs" Inherits="Admin.InfoEdit" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>编辑信息</title>
    <script src="/Js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="/Js/ajaxfileupload.js" type="text/javascript"></script>
</head>
<body>
    <!--<form id="form1"> 带不带下面的enctype都可以，推荐带上-->
<form id="form1"  enctype="multipart/form-data">
        <div>
            <table>
                <tr>
                    <td><em class="red">*</em>下载地址
                    </td>
                    <td align="left">
                        <input id="PicFile" name="PicFile" type="file" class="w200" /> 路径<input id="FilePath" type="text" class="w200" value="" readonly="true" /> 大小<input id="FileSize" type="text" class="w200" value="" readonly="true" /> <input type="button" id="buttonUplod" class="w200" value="上传" />
                    </td>
                </tr>
                <tr>
                    <th></th>
                    <th align="left" style="padding: 20px;">
                        <input type="button" value=" 保存 " id="btnOk" />
                        <input type="button" value=" 取消 " style="margin-left: 50px;" id="btnCancel" />
                    </th>
                </tr>
            </table>
        </div>
    </form>
    <script type="text/javascript">
        $(document).ready(function () {
            GetData();
            $("#btnOk").click(function () {
                DataEdit();
            });
            $("#btnCancel").click(function () {
                window.location.href = "Infos.aspx";
            });
        });

        function GetData() {
            var id = getQueryString("id") || 0;

            if (id == 0) {
                return;
            }
            var data = {};
            data.method = "GetData";
            data.id = id;
            ajaxProcess("/InfoEdit.aspx?", data, function callSuccess(oRet) {
                var result = oRet.Result[0];
                if (result != null) {
                    $("#FilePath").val(result.Url);
                }
            }, function callError(e) {
                alert(e);
            });
        }

        function DataEdit() {
            
            var id = getQueryString("id") || 0;
            var size = $("#FileSize").val();
            var picPath = $("#FilePath").val();
           
            if (!picPath) {
                showDialog("没有上传文件");
                return;
            }
            
            var data = {};
            data.method = "DataEdit";
            data.id = id,

            data.size = size;
            data.contents = contents;
            data.picfile = picPath;

            ajaxProcess("?", data, function (oRet) {
                if (oRet.Error || oRet.Result < 0) {
                    showDialog(oRet.Error || "操作失败");
                    return;
                }
                showDialog("操作成功", 1, 0, "提示", function () {
                    window.location.href = "Infos.aspx";
                });
            }, function (ex) { alert(ex); });
        }
    </script>
    <script type="text/javascript">
            $("#buttonUplod").click(function () {
                $.ajaxFileUpload({
                    url: 'Audioupload.aspx?type=2', //你处理上传文件的服务端 type=1 sys sound type=2 info
                    secureuri: false, //与页面处理代码中file相对应的ID值
                    fileElementId: 'PicFile',
                    dataType: 'json', //返回数据类型:text，xml，json，html,scritp,jsonp五种
                    success: function (data) {
                        //alert(data.path);
                        $("#FilePath").val(data.path);
                        $("#FileSize").val(data.size);
                        if (data.status == "error") {
                            alert(data.msg);
                        }
                    }
                });
            });
    </script>
</body>
</html>

====== Picupload.aspx 文件如下  =====

using System;
using System.Configuration;
using System.Drawing;
using System.IO;
using System.Web;
using Admin.App_Codes;
using Utility;

namespace Admin
{
    public partial class Picupload : PageBase
    {
        protected override void OnInit(EventArgs e)
        {
            PowerPageId = 10034;
            base.OnInit(e);
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                try
                {
                    var type = Request["type"];
                    if (Request.UrlReferrer==null || Request.UrlReferrer.ToString().Length < 1 || type==null)
                    {
                        Response.Write("该页面不能直接访问");
                        Response.End();
                    }
                    
                    var infoPicPath = ConfigurationManager.AppSettings["InfoPicPath"].ToString();

                    if (type == "2")
                    {
                        Upload(infoPicPath);
                    }

                }
                catch (Exception ex)
                {
                    var response = "{\"status\" : \"error\", \"msg\": " + "\"" + ex.Message.ToString() + "\"}";
                    Response.Write(response);
                    Response.End();
                }
            }
        }

        private void Upload(string picPath)
        {
            var response = "";
            
            try
            {
                HttpFileCollection files = Request.Files;
                if (files.Count > 0)
                {
                    HttpPostedFile file = files[0];


                    string tmpPath = Server.MapPath(picPath);
                    string fileName = Path.GetFileName(file.FileName);


                    var isSafe = PicCheck(file);

                    if (isSafe)
                    {
                        file.SaveAs(tmpPath + fileName);
                        //response = "{\"status\" : \"success\", \"path\": " + "\"" + picPath + fileName + "\"}";
                        response = "{\"status\" : \"success\", \"path\": " + "\"" + picPath + fileName + "\",\"size\": " + "\"" + file.ContentLength + "\"}";
                    }
                    else
                    {
                        response = "{\"status\" : \"error\", \"msg\": " + "\"图片格式不对或大小超限\"}";
                    }

                    Response.Clear();
                    Response.Write(response);
                }
            }
            catch (Exception ex)
            {
                response = "{\"status\" : \"error\", \"msg\": " + "\"" + ex.Message.ToString() + "\"}";
                Response.Write(response);
                Response.End();
            }
        }

        private bool PicCheck(HttpPostedFile picFile)
        {
            var isSafe = false;
            var picMaxSize = ConfigurationManager.AppSettings["PicMaxSize"].ToString().ToInt32();
            string fileName = Path.GetFileName(picFile.FileName);

            string picext = Path.GetExtension(fileName).ToLower();

            if (picext == ".jpg" || picext == ".gif" || picext == ".bmp" || picext == ".png")
            {
                isSafe = true;
            }
            else
            {
                isSafe = false;
                return isSafe;
            }

            if (picFile.ContentLength < picMaxSize)
            {
                isSafe = true;
            }
            else
            {
                isSafe = false;
                return isSafe;
            }

            //图片尺寸检查
            Stream picstream = picFile.InputStream;
            Image img = Image.FromStream(picstream);
            if (img.Width > 0 && img.Height > 0)
            {
                isSafe = true;
                //picstream.Close();
                //picstream.Flush();
            }
            else
            {
                isSafe = false;
                //picstream.Close();
                //picstream.Flush();
            }
            return isSafe;
        }
    }
}

===== ajaxfileupload.js 文件如下 ====

ajaxfileupload.js

jQuery.extend({
    createUploadIframe: function (id, uri) {
        //create frame
        var frameId = 'jUploadFrame' + id;
        if (window.ActiveXObject) {
            var io = document.createElement('<iframe id="' + frameId + '" name="' + frameId + '" />');
            if (typeof uri == 'boolean') {
                io.src = 'javascript:false';
            }
            else if (typeof uri == 'string') {
                io.src = uri;
            }
        }
        else {
            var io = document.createElement('iframe');
            io.id = frameId;
            io.name = frameId;
        }
        io.style.position = 'absolute';
        io.style.top = '-1000px';
        io.style.left = '-1000px';

        document.body.appendChild(io);

        return io
    },
    createUploadForm: function (id, fileElementId) {
        //create form 
        var formId = 'jUploadForm' + id;
        var fileId = 'jUploadFile' + id;
        var form = $('<form action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
        var oldElement = $('#' + fileElementId);
        var newElement = $(oldElement).clone();
        $(oldElement).attr('id', fileId);
        $(oldElement).before(newElement);
        $(oldElement).appendTo(form);
        //set attributes
        $(form).css('position', 'absolute');
        $(form).css('top', '-1200px');
        $(form).css('left', '-1200px');
        $(form).appendTo('body');
        return form;
    },
    addOtherRequestsToForm: function (form, data) {
        // add extra parameter
        var originalElement = $('<input type="hidden" name="" value="">');
        for (var key in data) {
            name = key;
            value = data[key];
            var cloneElement = originalElement.clone();
            cloneElement.attr({ 'name': name, 'value': value });
            $(cloneElement).appendTo(form);
        }
        return form;
    },

    ajaxFileUpload: function (s) {
        // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout 
        s = jQuery.extend({}, jQuery.ajaxSettings, s);
        var id = new Date().getTime()
        var form = jQuery.createUploadForm(id, s.fileElementId);
        if (s.data) form = jQuery.addOtherRequestsToForm(form, s.data);
        var io = jQuery.createUploadIframe(id, s.secureuri);
        var frameId = 'jUploadFrame' + id;
        var formId = 'jUploadForm' + id;
        // Watch for a new set of requests
        if (s.global && !jQuery.active++) {
            jQuery.event.trigger("ajaxStart");
        }
        var requestDone = false;
        // Create the request object
        var xml = {}
        if (s.global)
            jQuery.event.trigger("ajaxSend", [xml, s]);
        // Wait for a response to come back
        var uploadCallback = function (isTimeout) {
            var io = document.getElementById(frameId);
            try {
                if (io.contentWindow) {
                    xml.responseText = io.contentWindow.document.body ? io.contentWindow.document.body.innerHTML : null;
                    xml.responseXML = io.contentWindow.document.XMLDocument ? io.contentWindow.document.XMLDocument : io.contentWindow.document;
                } else if (io.contentDocument) {
                    xml.responseText = io.contentDocument.document.body ? io.contentDocument.document.body.innerHTML : null;
                    xml.responseXML = io.contentDocument.document.XMLDocument ? io.contentDocument.document.XMLDocument : io.contentDocument.document;
                }
            } catch (e) {
                jQuery.handleError(s, xml, null, e);
            }
            if (xml || isTimeout == "timeout") {
                requestDone = true;
                var status;
                try {
                    status = isTimeout != "timeout" ? "success" : "error";
                    // Make sure that the request was successful or notmodified
                    if (status != "error") {
                        // process the data (runs the xml through httpData regardless of callback)
                        var data = jQuery.uploadHttpData(xml, s.dataType);
                        // If a local callback was specified, fire it and pass it the data
                        if (s.success)
                            s.success(data, status);
                        // Fire the global callback
                        if (s.global)
                            jQuery.event.trigger("ajaxSuccess", [xml, s]);
                    } else
                        jQuery.handleError(s, xml, status);
                } catch (e) {
                    status = "error";
                    jQuery.handleError(s, xml, status, e);
                }


                // The request was completed
                if (s.global)
                    jQuery.event.trigger("ajaxComplete", [xml, s]);


                // Handle the global AJAX counter
                if (s.global && ! --jQuery.active)
                    jQuery.event.trigger("ajaxStop");

                // Process result
                if (s.complete)
                    s.complete(xml, status);
                jQuery(io).unbind()

                setTimeout(function () {
                    try {
                        $(io).remove();
                        $(form).remove();
                    } catch (e) {
                        jQuery.handleError(s, xml, null, e);
                    }
                }, 100)
                xml = null
            }
        }
        // Timeout checker
        if (s.timeout > 0) {
            setTimeout(function () {
                // Check to see if the request is still happening
                if (!requestDone) uploadCallback("timeout");
            }, s.timeout);
        }
        try {
            // var io = $('#' + frameId);
            var form = $('#' + formId);
            $(form).attr('action', s.url);
            $(form).attr('method', 'POST');
            $(form).attr('target', frameId);
            if (form.encoding) {
                form.encoding = 'multipart/form-data';
            }
            else {
                form.enctype = 'multipart/form-data';
            }
            $(form).submit();


        } catch (e) {
            jQuery.handleError(s, xml, null, e);
        }
        if (window.attachEvent) {
            document.getElementById(frameId).attachEvent('onload', uploadCallback);
        }
        else {
            document.getElementById(frameId).addEventListener('load', uploadCallback, false);
        }
        return { abort: function () { } };

    },

    uploadHttpData: function (r, type) {
        var data = !type;
        data = type == "xml" || data ? r.responseXML : r.responseText;
        // If the type is "script", eval it in global context
        if (type == "script")
            jQuery.globalEval(data);
        // Get the JavaScript object, if JSON is used.
        if (type == "json")
            eval("data = " + data);
        // evaluate scripts within html
        if (type == "html")
            jQuery("<div>").html(data).evalScripts();
        //alert($('param', data).each(function(){alert($(this).attr('value'));}));
        return data;
    }
})

=== end ===



Jack2013tong
关注
专栏目录
ajax页面 js文件上传,jQuery插件ajaxfileupload.js实现上传文件
weixin_29692653的博客
08-05 545
AjaxUpLoad.js的使用实现无刷新文件上传，如图1、创建页面并编写HTML上传文档:上传图片: 2、引用AjaxUpload.js文件3、编写JS脚本window.onload = function() {init(); //初始化}//初始化function init() {//初始化文档上传var btnFile = document.getElementById("btnUploa...
SpringMVC结合ajaxfileupload.js实现文件无刷新上传
10-21
在现代Web应用中，用户对交互性和体验性的需求日益提高，文件无刷新上传技术因此变得尤为重要。本篇文章将深入探讨如何使用SpringMVC框架与ajaxfileupload.js库来实现这一功能，让文件上传过程在不刷新整个页面的...
使用ajaxFileUpload插件实现图片无刷新上传
08-10
NULL 博文链接：https://yk1129013140.iteye.com/blog/2202098
jQuery插件之ajaxFileUpload
ajwqb06628的专栏
12-15 537
jQuery插件之ajaxFileUpload ajaxFileUpload.js 很多同名的，因为做出来一个很容易。 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里：http://files...
Jquery上传插件Uploadify无刷新上传文件
weixin_33725272的博客
03-19 102
Uploadify v3.2.1 上传图片并预览前端JSP：<scripttype="text/javascript"> $(function(){ $("#upload_org_code").uploadify({ 'height...
ajaxfileupload 上传插件
weixin_34217773的博客
09-10 78
弄了几天的上传，总是各种不兼容，现在基本算是完善了。目前的状况是发布在我自己的笔记本上，用同事的电脑访问IE10、firefox、chrome都可以正常上传，还有其他不完善的地方，欢迎大家赐教。。。。 ajaxfileupload.js 1 jQuery.extend({ 2 handleError: function (s, xhr, status, e) { ...
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
10-25
使用此插件时，开发者只需引入jQuery库和ajaxfileupload.js文件，之后便可通过简短的JavaScript代码实现文件的异步上传功能。 ### 2. 实现原理 当用户选择文件后，通过HTML中的一个按钮触发表单提交，但实际是由...
jQuery插件ajaxfileupload.js实现上传文件
10-22
在本文中，我们将深入探讨如何使用jQuery插件ajaxfileupload.js来实现无刷新的文件上传功能。这个插件是jQuery库的一个扩展，它允许开发者在不刷新整个页面的情况下完成文件的上传操作，从而提供更好的用户体验。 ...
使用ajaxfileupload.js实现jQuery无刷新文件上传
在Web开发中，实现文件上传功能是常见的需求，而jQuery插件ajaxfileupload.js提供了一个简单易用的解决方案，使得文件上传可以在不刷新页面的情况下完成，提高了用户体验。以下是使用ajaxfileupload.js实现上传文件...
ajaxFileUpload插件
08-11
ajaxFileUpload插件，支持单个文件上传，多文件请打包。
jquery ajax fileupload.js 下载
04-21
NULL 博文链接：https://dmwdmc.iteye.com/blog/1918988
ajaxfileupload.js
11-14
ajaxfileuoload.js,用于文件上传，向后台发送请求。有需要的下载吧~里面的 uploadHttpData方法我做了改动，如果不能正确运行请注意此处！
jQuery的ajaxFileUpload.js
03-11
jQuery的ajaxFileUpload.js。感觉这种异步上传的方式非常好用
Jquery上传插件文件ajaxfileupload.js 修复版下载
09-28
使用Jquery做上传文件处理时，用到了ajaxfileupload.js 这个第三方代码，但是这个js几乎就是半成品，问题很多。现在整理如下并附修复版的ajaxfileupload.js下载。 问题： 1：无法带参数提交，只能上传文件； 2：运行时报：jQuery.handleError is not a function 错误； 3：执行成功后，始终指向error方法处理，无法执行sucess方法； 解决方法： 1：无法带参数提交，只能上传文件； 原作者一定是把这个代码当作练习来写的，只完成了文件提交这个功能。需要对代码做些许修改即可。有两处修改： 第一处是将原createUploadForm: function(id, fileElementId) 方法添加一个data参数，并将data中的数据拼接进去即可 第二处 是调用createUploadForm方法地方 2：运行时报：jQuery.handleError is not a function 错误； 这个错误是由于ajaxfileupload.js 是在jquery1.4.2版本之前写的，Jquery之后的版本已经没有了handleError 方法，所以可以将1.4.2版本中的该方法复制到该js中 3：执行成功后，始终指向error方法处理，无法执行sucess方法； 这个是由于ajaxfileupload.js 处理返回data的时候，没有考虑后台返回的是字符串的问题(即使返回的JSON格式数据，我们也大多喜欢转化为字符串来返回)
jQuery Ajax File Upload(附源码)
技术资料收集站
12-12 481
项目结构 Default.aspx Upload.aspx Scripts/… style.css 效果图   客户端html代码 [xhtml] view plain copy %@ Page Language="vb" AutoEventWireup="false" CodeBehind=
2024年Web前端最全阿里大佬把近20年的DBA经验编写成了这份SQL高效优化笔记，阿里P7大佬手把手教你
最新发布
2401_84434237的博客
05-05 296
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它需要获取的小·伙伴可以直接添加小助手微信：Mxy98811即可免费获取引入篇SQL案例部分原理篇SQL篇实践篇总结函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；
使用ajaxFileUpload.js插件实现ajax无刷新上传文件
热门推荐
李熠专用博客_白帽子一枚，人称低危终结者
02-24 1万+
废话不多说直接看代码 首先需要下载ajaxFileUpload.js，百度去搜！ $.ajaxFileUpload( { url:'${ctx}/toImage.do', //需要链接到服务器地址 secureuri:false, fileElementId
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值