Jquery实现异步上传图片

来源：互联网发布：网络思想政治教育方法编辑：程序博客网时间：2024/05/22 00:12

利用jQuery的ajax函数就可以实现异步上传图片了。一开始我是想在处理程序中，直接用context.Request.Files来获取页面中的input file，但是不知道为什么一次获取不了。网上说的，Form中要设置enctype="multipart/form-data"和 method="post"，input file中要加runat="server"，但都加了依然获取不到。哪位大侠知道的，求指教啊。

既然后台获取不到Input file怎么办呢。其实我们上传文件，主要是获取到文件的物理地址就行了。只要有了这个文件地址就可以用bitmap获取到这个图片了。

刚开始我是想用ajax GET来传送地址，但TMD如果文件名有中文就乱码了。好在后面改成POST后就可以成功传送了。

话不多说，上代码：

前台：

[html] view plaincopyprint?
<html xmlns="http://www.w3.org/1999/xhtml">  
<head id="Head1" runat="server">  
    <title></title>  
    <script src="Scripts/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>  
    <script type="text/javascript">  
        function uploadImage() {  
        //判断是否有选择上传文件  
            var imgPath = $("#uploadFile").val();  
            if (imgPath == "") {  
                alert("请选择上传图片！");  
                return;  
            }  
            //判断上传文件的后缀名  
            var strExtension = imgPath.substr(imgPath.lastIndexOf('.') + 1);  
            if (strExtension != 'jpg' && strExtension != 'gif'  
            && strExtension != 'png' && strExtension != 'bmp') {  
                alert("请选择图片文件");  
                return;  
            }  
            $.ajax({  
                type: "POST",  
                url: "handler/UploadImageHandler.ashx",  
                data: { imgPath: $("#uploadFile").val() },  
                cache: false,  
                success: function(data) {  
                    alert("上传成功");  
                    $("#imgDiv").empty();  
                    $("#imgDiv").html(data);  
                    $("#imgDiv").show();  
                },  
                error: function(XMLHttpRequest, textStatus, errorThrown) {  
                    alert("上传失败，请检查网络后重试");  
                }  
            });  
        }  
    </script>  
</head>  
<body>  
<form  enctype="multipart/form-data" method="post">  
<input type="file" id="uploadFile" runat="server" />  
<input type="button" id="btnUpload" value="确定" onclick="uploadImage()" />  
<div id="imgDiv">  
</div>  
</form>  
</body>  
</html>  