ajaxfileupload组件的使用问题

0 0

ajaxfileupload组件的使用问题0

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

代码：

$.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('');
				}
			});

问题补充：<%@ 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>
var jq = jQuery.noConflict();
function uploadImage(obj) {

if(validateImage(obj)) {
jq.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("上传图片成功！");
jq('#imgPath').val(data[0].serverPath);

},
error: function (data, status, e) {           //相当于java中catch语句块的用法
jq('#imgPath').val('');
}
//,timeout:1000*60
});
}
}

// jq(document).ready(function() {
// jq("#imgFile").uploadify({
// 'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf',
// 'script': 'http://127.0.0.1:8090/publicInfoUploadImgTopic',
// 'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png',
// 'folder': 'UploadFile',
// 'queueID': 'fileQueue',
// 'buttonClass' : '',
// 'auto': false,
// 'multi': false,
// 'buttonText': '上传',
// 'onInit':function(){alert("1");},
// 'onSelect': function(e, queueId, fileObj)
// {
// alert("唯一标识:" + queueId + "\r\n" +
// "文件名：" + fileObj.name + "\r\n" +
// "文件大小：" + fileObj.size + "\r\n" +
// "创建时间：" + fileObj.creationDate + "\r\n" +
// "最后修改时间：" + fileObj.modificationDate + "\r\n" +
// "文件类型：" + fileObj.type
// );

// }
// });
// });

//校验图片格式及大小 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){
uploadImage(obj);
}
</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;display:" onchange="uploadImage(this)" id="newsImgFile" name="newsImgFile" />
<input type="file" class="abc" style="width:450px;" onclick="" id="imgFile" name="imgFile" />

</td>
</tr>

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

ajaxfileupload