Asp.net文件上传（转载）-优快云博客

本文介绍了一种利用jQuery插件实现网页图片上传的方法。通过具体代码示例展示了如何设置文件上传表单、验证图片格式及大小，并通过AJAX方式提交至服务器。此外还包含了简单的反馈提示功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ 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>