日期:2014-05-16  浏览次数:20354 次

ajaxfileupload的使用问题
在使用ajaxfileupload组件中,能上传图片了,但是碰到了个问题:从本地选择一张图片上传后,在input标签中没有显示该图片的路径,调了很久都没出来。。。 
怎么搞,现在项目一定要显示上传图片的本地路径。。。 

完整代码:
HTML code

<%@ page contentType="text/html; charset=GBK" %>
<html>
<meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">


 <HEAD>
  <TITLE> New Document </TITLE>
 </HEAD>
<script language="javascript" src="common/jquery/jquery.js"></script>
<script language="javascript" src="common/jquery/ajaxfileupload.js"></script>
<script>
    function uploadImage(obj) {
        var tmpFilePath = obj.value;
        
        
        if(validateImage(obj)) {
            $.ajaxFileUpload({
                url:'http://127.0.0.1:8090/publicInfoUploadImgTopic',       //需要链接到服务器地址
                secureuri:false,
                fileElementId:'newsImgFile',                            //文件选择框的id属性
                dataType: 'json',                                   //服务器返回的格式,可以是json
                success: function (data, textStatus) {               //相当于java中try语句块的用法
                    //[{isSuccess:true|false,serverPath:XXXXX}]
                    alert("上传图片成功!");
                    //$('#imgPath').val(data[0].serverPath);
                    //alert($('#imgPath').val());
                },
                error: function (data, status, e) {           //相当于java中catch语句块的用法
                    $('#imgPath').val('');
                }
            });
        }
    }
    
    
    //校验图片格式及大小 Add Date 2012-6-14 LIUYI 
    function validateImage(obj) {
        var file = obj;
        var tmpFileValue = file.value;
        
        //校验图片格式
        if(/^.*?\.(gif|png|jpg|jpeg|bmp)$/.test(tmpFileValue.toLowerCase())){
            return true;
        } else {
            alert("只能上传jpg、jpeg、png、bmp或gif格式的图片!");
            return false;
        }
        
        //校验图片大小,这段代码需调整浏览器安全级别(调到底级)和添加可信站点(将服务器站点添加到可信站点中)
        //var imgSize = 1024 * 100; //最大100K
        //var img = new Image();
        if(file.value != ""){
            
        //    img.onreadystatechange = function(){
        //        if(img.readyState == "complete"){
        //            if(img.fileSize <=0 || img.fileSize > imgSize){
        //                alert("当前文件大小" + img.fileSize / 1024 + "KB, 超出最大限制 " + imgSize / 1024 + "KB");
        //                return false;
        //            }else{
        //                alert("OK");
        //                return true;
        //            }
        //        }
        //    }
            
        //    img.src = file.value;
            //return true;
        }else{
            alert("请选择上传的文件!");
            return false;
        }
    }
    
    function test(obj){
        alert($(obj).val());
        alert(obj.value);
        alert(document.getElementById("imgFile").value);
    }
</script>
<body>
        <table bgcolor="" align="center"><tr><td>

            <tr>
            <td colspan="2" align="right">
                  <input type="hidden" id="imgPath" name="imgPath" />
                  <input type="file" class="abc" style="width:450px;" onchange="uploadImage(this)" id="newsImgFile" name="imgFile" />
            </td>
            </tr>

        </table>
</body>
</html>