ajaxfileupload文件上传

最新推荐文章于 2021-08-05 14:01:51 发布

larance

最新推荐文章于 2021-08-05 14:01:51 发布

阅读量2.2k

点赞数

分类专栏： JS && CSS 文章标签： function file jquery插件 javascript json 服务器

JS && CSS 专栏收录该内容

59 篇文章 0 订阅

订阅专栏

转自：http://blog.sina.com.cn/s/blog_677b66170100lnek.html

需要使用jQuery库文件和AjaxFileUpload库文件

使用实例

http://www.phpletter.com/contents/ajaxfileupload/ajaxfileupload.js

一，包含文件部分

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

二，HTML 部分

<img id="loading " src="loading.gif" style="display:none;">
<input id="fileToUpload " type="file" size="20" name="fileToUpload " class="input">
<button class="button" id="buttonUpload" οnclick="return ajaxFileUpload ();">上传</button>

只需要三个元素，一个动态加载小图标、一个文件域和一个按钮
注意：使用AjaxFileUpload插件上传文件可不需要form，如下：

<form name="form" action="" method="POST" enctype="multipart/form-data">
……相关 html代码……
</form>

因为AjaxFileUpload插件会自动生成一个form 提交表单。

对于file文件域ID和name，ajaxFileUpload插件fileElementId参数需要获取文件域ID，如果处理上传文件操作就需要知道文件域name，以便获取上传文件信息，这两者关系一定要清楚。

三，javascript部分

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/ajaxfileupload.js"></script>
        <script type="text/javascript">
    function ajaxFileUpload()
    {
        
        $("#loading")
        .ajaxStart(function(){
            $(this).show();
        })//开始上传文件时显示一个图片
        .ajaxComplete(function(){
            $(this).hide();
        });//文件上传完成将图片隐藏起来
        
        $.ajaxFileUpload
        (
            {
                url:'fileUploadAction.action',//用于文件上传的服务器端请求地址
                secureuri:false,//一般设置为false
                fileElementId:'file',//文件上传空间的id属性  <input type="file" id="file" name="file" />
                dataType: 'json',//返回值类型 一般设置为json
                success: function (data, status)  //服务器成功响应处理函数
                {
                    alert(data.message);//从服务器返回的json中取出message中的数据,其中message为在struts2中action中定义的成员变量
                    
                    if(typeof(data.error) != 'undefined')
                    {
                        if(data.error != '')
                        {
                            alert(data.error);
                        }else
                        {
                            alert(data.message);
                        }
                    }
                },
                error: function (data, status, e)//服务器响应失败处理函数
                {
                    alert(e);
                }
            }
        )
        
        return false;


    }
    </script>
    </head>
    <body>
        <img src="loading.gif" id="loading" style="display: none;">
        <input type="file" id="file" name="file" />
        <br />
        <input type="button" value="上传" οnclick="return ajaxFileUpload();">
    </body>
</html>

主要参数说明：
1，url表示处理文件上传操作的文件路径，可以测试URL是否能在浏览器中直接访问，如上：upload.php
2，fileElementId表示文件域ID，如上：fileToUpload
3，secureuri是否启用安全提交，默认为false
4，dataType数据数据，一般选json，javascript的原生态
5，success提交成功后处理函数
6，error提交失败处理函数

上面有两个方法，一个动态加载小图标提示函数loading()和ajaxFileUpload文件上传$.ajaxFileUpload()函数，这与我们使用jQuery.ajax()函数差不多，使用很简单，这里我省略了PHP处理上传文件，使用jQuery插件 AjaxFileUpload实现ajax文件就这么简单。

同时我们需要了解相关的错误提示

1，SyntaxError: missing ; before statement错误
如果出现这个错误就需要检查url路径是否可以访问

2，SyntaxError: syntax error错误
如果出现这个错误就需要检查处理提交操作的PHP文件是否存在语法错误

3，SyntaxError: invalid property id错误
如果出现这个错误就需要检查属性ID是否存在

4，SyntaxError: missing } in XML expression错误
如果出现这个错误就需要检查文件域名称是否一致或不存在

5，其它自定义错误
可使用变量$error直接打印的方法检查各参数是否正确，比起上面这些无效的错误提示还是方便很多。

upload.php

$error = '错误的描述定义';

$msg = '要返回的数值';

echo "{";
echo "error: '" . $error . "',\n";
echo "msg: '" . $msg . "'\n";
echo "}";

需注意的是，要想有返回值$msg, $error的值必须为空

larance

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ajaxfileupload文件上传

转自：http://blog.sina.com.cn/s/blog_677b66170100lnek.html需要使用jQuery库文件和AjaxFileUpload库文件使用实例http://www.phpletter.com/contents/aj
复制链接

扫一扫