在表单中无法直接使用 Ajax 上传文件，解决的思路可以是使用插件无刷新地上传文件，返回文件上传后的地址，然后把该地址作为 Ajax 的参数传递给服务器端进行数据库处理。可以使用 uploadify 插件来实现该思路。

官方网站：http://www.uploadify.com

文档地址：http://www.uploadify.com/documentation/

插件有 Flash 版 和 HTML5 版，项目中用到的是 Flash 版。

下载 Demo 并解压：

其中 index.php ：包含了 html ，并且调用了核心 js 库的接口；

jquery.uploadify.js ：核心 js 库；

uploadify.php ：处理上传，并且返回上传是否成功的状态值。

对官方 demo 稍作修改：

index.html 主要代码

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="__PUBLIC__/css/uploadify.css" type="text/css">

<script src="__PUBLIC__/js/Jquery-1.8.3.js.js"></script>

<script src="__PUBLIC__/js/jquery.uploadify.js" type="text/javascript"></script>

<script src="__PUBLIC__/js/upload.js" type="text/javascript"></script>

</head>

<body>

<form id="upform">

    <div id="queue"></div>

    <input id="file_upload" name="file_upload" type="file" multiple="true">

</form>

</body>

</html>

upload.js 代码：

$(function(){

    $timestamp = $("#timestamp").html();

    $token = $("#token").html();

    $swfurl = $("#swfurl").html();

    $('#file_upload').uploadify({

        'formData'     : {

            'timestamp' : $timestamp,

            'token'     : $token

        },

        'swf'      : $swfurl,

        'uploader' : 'uploadify.php',

        'onUploadSuccess' : function(file, data, response) {

            var dataObj = eval("(" + data + ")");

            if(1 == dataObj.code){

                $msg = '文件'+ file.name + '上传成功';

                $("#msg").html($msg);

                $("#filename").html(dataObj.filename);

            }else if(2 == dataObj.code){

                $msg = '文件上传失败,请上传小于2M的.dox、.docx、.pdf文件';

                layer.msg($msg, 2, 3);

            }else if(3 == dataObj.code){

                $msg = '文件类型错误';

                layer.msg($msg, 2, 3);

            }else{

                $msg = '上传失败,请上传小于2M的.dox、.docx、.pdf文件';

                layer.msg($msg, 2, 3);

            }

        }

    });

})

uploadify.php

<?php

$targetFolder = './Uploads/authorization';

$verifyToken = md5('unique_salt' . $_POST['timestamp']);

if (!empty($_FILES) && $_POST['token'] == $verifyToken) {

    $tempFile = $_FILES['Filedata']['tmp_name'];

    $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;

    $fileTypes = array('doc','docx','pdf');

    $fileParts = pathinfo($_FILES['Filedata']['name']);

    $filename = $_SESSION['member']['mid'].'-'.date('Ymd-His').'-'.  mt_rand(0,1000).'.'.$fileParts['extension'];

    $targetFile = rtrim($targetPath,'/') . '/' . $filename;

    if (in_array($fileParts['extension'],$fileTypes)) {

        if(move_uploaded_file($tempFile,$targetFile)){

            $arr['code']= 1;

        }else{

            //上传失败

            $arr['code'] = 2;

            $arr['file_name'] = '';

        }

    } else {

        //文件类型错误

        $arr['code'] = 3;

        $arr['file_name'] = '';

    }

}else{

    $arr['code'] = 4;

    $arr['file_name'] = '';

}

$arr['filename'] = $filename;

exit(json_encode($arr));

Ajax 无刷新上传文件插件 uploadify 的使用的更多相关文章

  1. ajax无刷新上传文件

    网页上传文件最简单的方式就是通过表单上传了,但是在提交表单的时候会导致网页刷新,但有的时候我们不想网页刷新,有什么办法呢,我们可以使用ajax上传文件来做到这一点.只有ajax还不行,还需要JavaS ...

  2. jquery 的ajax无刷新上传文件之后，页面还是会莫名的刷新-----解决办法

    文件上传用到全局数组: $_FILES 只需要把下面的 <button onclick="post()">提交</button> 改为 <input ...

  3. ajaxfileupload.js插件结合一般处理文件实现Ajax无刷新上传

    先上几张图更直观展示一下要实现的功能.本功能主要通过Jquery ajaxfileupload.js插件结合ajaxUpFile.ashx一般应用程序处理文件实现Ajax无刷新上传功能,结合NPOI2 ...

  4. 文件无刷新上传(swfUpload与uploadify)

    文件无刷新上传并获取保存到服务器端的路径 遇到上传文件的问题,结合之前用到过的swfUpload,又找了一个无刷新上传文件的jquery插件uploadify,写篇博客记录一下分别介绍这两个插件的实现 ...

  5. jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟

    在很多项目中都会叫用户上传东西这些的,自从接触了jquery 和ajax之后就不管做什么,首先都会想到这个,我这个人呢?是比较重视客户体验的,这次我这边负责的是后台板块,然后就有一块是要求用户上传照片 ...

  6. ajax ＋jsp＋iframe无刷新上传文件[转]

    http://hi.baidu.com/zj360202/blog/item/f23e3711f929c774cb80c475.html ajax jsp 无刷新上传文件 2009-10-26 16: ...

  7. jQuery+php+ajax实现无刷新上传文件功能

    jQuery+php+ajax实现无刷新上传文件功能,还带有上传进度条动画效果,支持图片.视频等大文件上传. js代码 <script type='text/javascript' src='j ...

  8. 移动端图片上传解决方案localResizeIMG先压缩后ajax无刷新上传

    现在科技太发达,移动设备像素越来越高,随便一张照片2M+,但是要做移动端图片上传和pc上略有不同,移动端你不能去限制图片大小,让用户先处理图片再上传,这样不现实.所以理解的解决方案就是在上传先进行图片 ...

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

    首先要说的就是 ajax 是无法实现上传文件的,可以想一下ajax与后台通信都是通过传递字符串,怎么能传递文件呢?其实出于安全考虑js是不能操作文件的,所以就不要再说用ajax来实现文件的上传了,这是 ...

随机推荐

  1. 软件打开时间、窗体透明度、背景色---《用delphi开发共享软件》-15.1任务管理器

    1.计算软件启动了多长时间:用定时器,每分钟触发一次: procedure TFrmMain.tmCheckLegalTimer(Sender: TObject);Var Minutes:LongIn ...

  2. 【noip2014T3】

    上文有提到noip2014还有没A的嘛..就先把这个坑给填了 flappy bird好sad啊 还是先做解方程 八中的数据好强了,然而我最后凑了四个质数就A了,感谢shy! 作为联赛最后一题,学习它的 ...

  3. Python基础7- 流程控制之循环

    循环: 把一段代码重复性的执行N次,直到满足某个条件为止. 为了在合适的时候,停止重复执行,需要让程序出现满足停止循环的条件.Python中有三种循环(实质只有两种): while循环 for循环 嵌 ...

  4. Redis Tools

    1. Resources Redis Desktop Manager http://redisdesktop.com/ Redis命令的中文文档 http://redisdoc.com/ Redis安 ...

  5. Shell 编程基础之括号的作用

    一.小括号() 单小括号 命令组.括号中的命令将会新开一个子shell顺序执行,所以括号中的变量不能够被脚本余下的部分使用.括号中多个命令之间用分号隔开,最后一个命令可以没有分号,各命令和括号之间不必 ...

  6. soapui中文操作手册(四)----MOCK服务

    Web Service Mocking是武器库一个非常有用的工具.这是解决“如果没有Web服务如何创建针对性的Web服务测试”问题的办法.Web Service Mocking将在这里派上用场.它允许 ...

  7. BZOJ3485 : [Baltic2012]peaks

    首先将每个平原缩成一个点,建出图,相邻两个点之间的边权为它们高度的较小值. 用Kruskal算法求出这个图的最大生成树,每次合并两个连通块时新建一个点指向它们,得到一棵有根树. 对于每个点,求出它子树 ...

  8. (转)Storm UI 解释

    Storm UI link:http://lbxc.iteye.com/category/221265 本文主要解释下storm ui上各项属性的含义. 1. mainpage 首页主要分为3块: a ...

  9. curl/wget 测试http请求的响应头信息

    1. wget –debug wget可以使用debug信息来查看信息头,如下: [root@localhost ~]# wget --debug http://192.168.1.101:8080/ ...

  10. 串 & 容斥原理

    题意: 给出n (n<=50000) 个长度为4的字符串,问有且仅有d(1<=d<=4)处不相同的字符串有几对. SOL: 一直对着4发呆,这么小的字符串背后有什么玄学呢= =... ...