ajaxfileupload的使用

最新推荐文章于 2024-08-22 09:31:39 发布

窦小豆

最新推荐文章于 2024-08-22 09:31:39 发布

阅读量265

点赞数

分类专栏： php asp thinkphp

php 同时被 3 个专栏收录

102 篇文章 0 订阅

订阅专栏

thinkphp

95 篇文章 0 订阅

订阅专栏

asp

62 篇文章 0 订阅

订阅专栏

ajaxfileupload的使用

(2012-08-02 10:24:13)

<%@ 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.getElementByIdx_x("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;" οnchange="uploadImage(this)" id="newsImgFile" name="imgFile" />
</td>
</tr>

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