文章详细内容

发布日期：2014年05月27日   来源：PHP1.CN     点击：92384

摘要：jQuery插件AjaxFileUpload实现ajax上传文件functionpreviewImg(sender){varfilesender.value.substring(sender.value.length-4);if(file.toUpperCase()!.PNG){alert(请选择PNG文件上传！);r...

jQuery插件AjaxFileUpload实现ajax上传文件

function previewImg(sender){
   var file = sender.value.substring(sender.value.length-4);
   if(file.toUpperCase() !='.PNG'){
    alert('请选择PNG文件上传！');
    return false;
   }
   var objPreview=document.getElementByIdx_xx_x('imageShow');
   var objPreviewFake = document.getElementByIdx_xx_x('previewDiv');
     if (sender.files && sender.files[0])
            {
   
        document.getElementByIdx_xx_x("previewDiv").innerHTML="";
     document.getElementByIdx_xx_x("previewDiv").innerHTML="<img width=\"60px\" height=\"60px\" id=\"imageShow\" src='"+sender.files[0].getAsDataURL()+"'></img>";               
            }
            else if (objPreviewFake.filters)
            {
                // IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果       
                //（相同环境有时能显示，有时不显示），因此只能用滤镜来解决       
                // IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径       
                sender.select();
                var imgSrc = document.selection.createRange().text;
                objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
                objPreview.style.display = 'none';
            }
 }

jQuery插件AjaxFileUpload可以实现ajax文件上传，该插件使用非常简单，首先了解一下正确使用AjaxFileUpload插件的方法，然后再了解一些常见的错误信息和解决方法。

使用说明

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

使用实例

一，包含文件部分

    <script type="text/javascript" src="http://upload.server110.com/image/20131226/1PG54921-0.jpg"></script>
    <script type="text/javascript" src="http://upload.server110.com/image/20131226/1PG54b3-1.jpg"></script>

二，HTML部分

    <img src="http://upload.server110.com/image/20131226/1PG53444-2.gif">
    <input type="file" size="20" >
    <button>上传</button>

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

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

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

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

三，javascript部分

    <script type="text/javascript">
    function ajaxFileUpload (){
    loading();//动态加载小图标
    $.ajaxFileUpload ({
    url :'upload.php',
    secureuri :false,
    fileElementId :'fileToUpload',
    dataType : 'json',
    success : function (data, status){
    if(typeof(data.error) != 'undefined'){
    if(data.error != ''){
    alert(data.error);
    }else{
    alert(data.msg);
    }
    }
    },
    error: function (data, status, e){
    alert(e);
    }
    })
    return false;
    }
    function loading (){
    $("#loading ").ajaxStart(function(){
    $(this).show();
    }).ajaxComplete(function(){
    $(this).hide();
    });
    }
    </script>