ajax上传文件，并检查文件类型、检查文件大小

1、使用ajaxfileupload.js的插件，但是对插件做了一处修改，才能够正常使用

　　修改的部分如下：

      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"){//对json类型的返回结果，做截取处理

             var tempData = data.substring(data.indexOf(">\"") + 2);

             data = tempData.replace("\"</pre>", "");

         }

         if (type == "html")

             jQuery("<div>").html(data).evalScripts();

         return data;

     }

2、检查文件大小，对于常用浏览器测试都是可以的...

3、使用struts的action接收，两个参数：1）上传到文件imageFile;2)上传的本地文件路径imageFilePath

4、ajaxfileupload.js源码在最后贴出来

 <!DOCTYPE html>

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <script src="jquery1.8/jquery-1.8.0.js" type="text/javascript"></script>

     <script src="ajaxfileupload.js"></script>

     <script type="text/javascript">

 /* 头像上传 */

 function ajaxfileupload() {

     var filepath = $("#imageFile").val();

     //检查是否为图片

     if(!isImage(filepath)){

         return false;

     }

     //检查文件大小，不能超过2M

     if(!checkFileSize(filepath)){

         return false;

     }

     $.ajaxFileUpload({

             url: 'stu/uploadimage',

             secureuri: false,           //一般设置为false

             type: 'post',

             data: {imageFileName: $("#imageFile").val()},

             dataType: 'json',

             fileElementId: "imageFile",

             success: function (data, status) {

                 if (data == "error") {

                     alert("上传失败，请重试");

                 } else {

                     //导航栏：头像

                     $("#header_student_image").attr("src", data);

                     alert("上传成功");

                 }

             },

             error: function (data, status, e)//服务器响应失败处理函数

             {

                 alert("上传失败，请重试");

             }

         }

     );

     return false;

 };

 /* 检查是否为图片 */

 function isImage(filepath) {

     var extStart = filepath.lastIndexOf(".");

     var ext = filepath.substring(extStart, filepath.length).toUpperCase();

     if (ext != ".BMP" && ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") {

         alert("头像只能是bmp,png,gif,jpeg,jpg格式喔");

         return false;

     }

     return true;

 }

 /* 检查图片大小，不能超过3M,支持IE、filefox、chrome */

 function checkFileSize(filepath) {

     var maxsize = 2 * 1024 * 1024;//2M

     var errMsg = "上传的头像文件不能超过2M喔！！！";

     var tipMsg = "您的浏览器暂不支持上传头像，确保上传文件不要超过2M，建议使用IE、FireFox、Chrome浏览器。";

     try {

         var filesize = 0;

         var ua = window.navigator.userAgent;

         if (ua.indexOf("MSIE") >= 1) {

             //IE

             var img = new Image();

             img.src = filepath;

             filesize = img.fileSize;

         } else {

             //file_size = document.getElementById("imageFile").files[0].size;

             filesize = $("#imageFile")[0].files[0].size; //byte

         }

         if (filesize > 0 && filesize > maxsize) {

             alert(errMsg);

             return false;

         } else if (filesize == -1) {

             alert(tipMsg);

             return false;

         }

     } catch (e) {

         alert("头像上传失败，请重试");

         return false;

     }

     return true;

 }

     </script>

     <title>test:上传头像</title>

 </head>

 <body>

     <table width="500" cellspacing="0" cellpadding="0">

         <tr>

             <td width="72" id="fileType">

             </td>

             <td width="242">

                  <img id="image_url" src="" class="wetalkimg"/>

                  <input type="file" id="imageFile" name="imageFile" onchange="ajaxfileupload(this);"/>

              </td>

         </tr>

     </table>

 </body>

 </html

5、ajaxfileupload.js源码

 jQuery.extend({

     createUploadIframe: function (id, uri) {//id为当前系统时间字符串，uri是外部传入的json对象的一个参数

         //create frame

         var frameId = 'jUploadFrame' + id; //给iframe添加一个独一无二的id

         var iframeHtml = '<iframe id="' + frameId + '" name="' + frameId + '" style="position:absolute; top:-9999px; left:-9999px"'; //创建iframe元素

         if (window.ActiveXObject) {//判断浏览器是否支持ActiveX控件

             if (typeof uri == 'boolean') {

                 iframeHtml += ' src="' + 'javascript:false' + '"';

             }            else if (typeof uri == 'string') {

                 iframeHtml += ' src="' + uri + '"';

             }

         }

         iframeHtml += ' />';

         jQuery(iframeHtml).appendTo(document.body); //将动态iframe追加到body中

         return jQuery('#' + frameId).get(0); //返回iframe对象

     },

     createUploadForm: function (id, fileElementId, data) {//id为当前系统时间字符串，fileElementId为页面<input type='file' />的id，data的值需要根据传入json的键来决定

         //create form

         var formId = 'jUploadForm' + id; //给form添加一个独一无二的id

         var fileId = 'jUploadFile' + id; //给<input type='file' />添加一个独一无二的id

         var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data" ></form>'); //创建form元素

         if (data) {//通常为false

             for (var i in data) {

                 jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form); //根据data的内容，创建隐藏域，这部分我还不知道是什么时候用到。估计是传入json的时候，如果默认传一些参数的话要用到。

             }

         }        var oldElement = jQuery('#' + fileElementId); //得到页面中的<input type='file' />对象

         var newElement = jQuery(oldElement).clone(); //克隆页面中的<input type='file' />对象

         jQuery(oldElement).attr('id', fileId); //修改原对象的id

         jQuery(oldElement).before(newElement); //在原对象前插入克隆对象

         jQuery(oldElement).appendTo(form); //把原对象插入到动态form的结尾处

         //set attributes

         jQuery(form).css('position', 'absolute'); //给动态form添加样式，使其浮动起来，

         jQuery(form).css('top', '-1200px');

         jQuery(form).css('left', '-1200px');

         jQuery(form).appendTo('body'); //把动态form插入到body中

         return form;

     },

     ajaxFileUpload: function (s) {//这里s是个json对象，传入一些ajax的参数

         // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout

         s = jQuery.extend({}, jQuery.ajaxSettings, s); //此时的s对象是由jQuery.ajaxSettings和原s对象扩展后的对象

         var id = new Date().getTime(); //取当前系统时间，目的是得到一个独一无二的数字

         var form = jQuery.createUploadForm(id, s.fileElementId, (typeof (s.data) == 'undefined' ? false : s.data)); //创建动态form

         var io = jQuery.createUploadIframe(id, s.secureuri); //创建动态iframe

         var frameId = 'jUploadFrame' + id; //动态iframe的id

         var formId = 'jUploadForm' + id; //动态form的id

         // Watch for a new set of requests

         if (s.global && !jQuery.active++) {//当jQuery开始一个ajax请求时发生

             jQuery.event.trigger("ajaxStart"); //触发ajaxStart方法

         }        var requestDone = false; //请求完成标志

         // Create the request object

         var xml = {};        if (s.global)

             jQuery.event.trigger("ajaxSend", [xml, s]); //触发ajaxSend方法

         // Wait for a response to come back

         var uploadCallback = function (isTimeout) {//回调函数

             var io = document.getElementById(frameId); //得到iframe对象

             try {                if (io.contentWindow) {//动态iframe所在窗口对象是否存在

                 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) {//动态iframe的文档对象是否存在

                 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") {//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); //根据传送的type类型，返回json对象，此时返回的data就是后台操作后的返回结果

                         // 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();//移除iframe的事件处理程序

                 setTimeout(function () {//设置超时时间

                     try {

                         jQuery(io).remove();//移除动态iframe

                         jQuery(form).remove();//移除动态form

                     } 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 form = jQuery('#' + formId);

             jQuery(form).attr('action', s.url);//传入的ajax页面导向url

             jQuery(form).attr('method', 'POST');//设置提交表单方式

             jQuery(form).attr('target', frameId);//返回的目标iframe，就是创建的动态iframe

             if (form.encoding) {//选择编码方式

                 jQuery(form).attr('encoding', 'multipart/form-data');

             }            else {

                 jQuery(form).attr('enctype', 'multipart/form-data');

             }

             jQuery(form).submit();//提交form表单

         } catch (e) {

             jQuery.handleError(s, xml, null, e);

         }

         jQuery('#' + frameId).load(uploadCallback); //ajax 请求从服务器加载数据，同时传入回调函数

         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"){//修改之处

             var tempData = data.substring(data.indexOf(">\"") + 2);

             data = tempData.replace("\"</pre>", "");

         }

         if (type == "html")

             jQuery("<div>").html(data).evalScripts();

         return data;

     },

     handleError: function (s, xhr, status, e) {

         if (s.error) {

             s.error.call(s.context || s, xhr, status, e);

         }

         if (s.global) {

             (s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]);

         }

     }

 })

ajax上传文件，并检查文件类型、检查文件大小的更多相关文章

Ajax 上传input type file 文件
Html: <div class="attach-img"> <label><input type="file" id=" ...
框架基础：ajax设计方案（三）--- 集成ajax上传技术大文件/超大文件前端切割上传，后端进行重组
马上要过年了,哎,回家的心情也特别的激烈.有钱没钱,回家过年,家永远是舔舐伤口最好的地方.新的一年继续加油努力. 上次做了前端的ajax的上传文件技术,支持单文件,多文件上传,并对文件的格式和大小进行 ...
MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传
前段时间做了几个关于图片.文件上传的Demo,使用客户端Query-File-Upload插件和服务端Badkload组件实现多文件异步上传,比如"MVC文件上传04-使用客户端jQuery ...
前端通信：ajax设计方案（四）--- 集成ajax上传技术大文件/超大文件前端切割上传，后端进行重组
马上要过年了,哎,回家的心情也特别的激烈.有钱没钱,回家过年,家永远是舔舐伤口最好的地方.新的一年继续加油努力. 上次做了前端的ajax的上传文件技术,支持单文件,多文件上传,并对文件的格式和大小进行 ...
Ajax上传文件/照片时报错TypeError ：Illegal invocation
问题 Ajax上传文件/照片时报错TypeError :Illegal invocation 解决网上搜索问题,错误原因可能有以下几个,依次检查: 请求类型有误,如post请求,但在后台设置的是ge ...
IE8/9 JQuery.Ajax 上传文件无效
IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...
闲话ajax，例ajax轮询，ajax上传文件[开发篇]
引语:ajax这门技术早已见怪不怪了,我本人也只是就自己真实的经验去总结一些不足道的话.供不是特别了解的朋友参考参考! 本来早就想写一篇关于ajax的文章的,但是前段时间一直很忙,就搁置了,趁着元旦放 ...
Ajax 上传文件（input file FormData）
FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据.其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用. jQuery Aj ...
Ajax实现文件上传的临时垃圾文件回收策略
转载请注明原文出处:http://www.cnblogs.com/ygj0930/p/6126240.html 在我们web开发过程中,一个很重要的技术就是Ajax(异步传输).Ajax通过把数据从网 ...
models渲染字典&form表单上传文件&ajax上传文件
{# {% for u in teacher_d.keys %}#} {# {% for u in teacher_d.values %}#} {% for k,u in teacher_d.item ...

随机推荐

YTU 2973: C语言习题5.25--文件操作2
2973: C语言习题5.25--文件操作2 时间限制: 1 Sec 内存限制: 128 MB 提交: 242 解决: 105 题目描述文本文件score.dic 中存储了n名学生的信息(班级编 ...
Memcached缓存瓶颈分析
Memcached缓存瓶颈分析获取Memcached的统计信息 Shell: # echo "stats" | nc 127.0.0.1 11211 PHP: $mc = new ...
利用JAVA反射机制将JSON数据转换成JAVA对象
net.sf.json.JSONObject为我们提供了toBean方法用来转换为JAVA对象, 功能更为强大, 这里借鉴采用JDK的反射机制, 作为简单的辅助工具使用, 有些数据类型需要进行转 ...
回车和换行在linux下和windows下
今天,我总算搞清楚"回车"(carriage return)和"换行"(line feed)这两个概念的来历和区别了. 1. 在计算机还没有出现之前,有一种叫 ...
[poj2104] K-th Number (主席树)
主席树 Description You are working for Macrohard company in data structures department. After failing y ...
CAGradientLayer
参考: CAShapeLayer和CAGradientLayer 一简介 1,CAGradientLayer,处理颜色渐变: 2,CAGradientLayer的渐变色可以做隐式动画: 3,大部分情 ...
HDU 5059 Harry And Biological Teacher
链接:http://acm.hdu.edu.cn/showproblem.php?pid=5069 题意:给出n个串,m个询问,每个询问(u,v),求u的一个最长后缀是v的前缀. 思路:离线.将关于u ...
SQL生成随机数
ALTER FUNCTION [dbo].[ufn_Random] ( @A INT, @B INT ) RETURNS INT AS BEGIN /* 功能:生成随机数 */ ,) , SELECT ...
基于Microchip单片机的触摸感应技术
Microchip提供两种电容式触摸感应解决方案,一种为张驰振荡器方式,即通过检测触摸感应电容充放电的频率变化,来检测是否有键按下,根据单片机集成的硬件资源不同,另一种通过Microchip单片机集成 ...
C# WPF MVVM 实战 – 4 - 善用 IValueConverter
IValueConverter,做 WPF 的都应该接触过,把值换成 Visibility .Margin 等等是最常见的例子,也有很多很好的博文解释过用法.本文只是解释一下,MVVM 中一些情景. ...

ajax上传文件，并检查文件类型、检查文件大小

ajax上传文件，并检查文件类型、检查文件大小的更多相关文章

随机推荐

热门专题