aspupload/index.htm at master · sysdzw/aspupload · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<style type="text/css">
*{margin:0px; padding:0px;}
img{width:80px; height: 80px; margin:5px;padding:2px; border:1px solid #ccc;}
#img_urls{width:100%;}
#file1{display: none;}
.uploadMain div{float:left;}
.upload{width:80px; height: 80px;margin:5px;padding:2px;  border:1px solid #ccc; color: #ccc; font-size: 80px;text-align: center; line-height:76px; font-family: "Letter Gothic", "Helvetica Neue","lucida grande", "lucida sans unicode", lucida, sans-serif;}
.clear{clear:both;}
</style>
<link rel="stylesheet" href="//at.alicdn.com/t/font_626784_94vzj1uhgvh.css" />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<title>上传文件测试</title>
</head>
<body>
<div class="uploadMain">
    <div id="result"></div><div class="upload">+</div>
</div>
<form method="post" name="form1" id="form1"  enctype="multipart/form-data">
  <input name="file1" id="file1" type="file" size="20" accept="image/*">
</form>

<input type="hidden" id="img_urls">
<div class="clear"></div>
<input type="button" id="get_img_urls" value="查看图片url">
</body>
<script type="text/javascript">
$(".upload").click(function(){
    $("#file1").click();
});

//提醒：一定要设置iis那边上传文件大小默认是200k，一定要改大！！！！！！！！！！！！
$("#file1").change(function(){
    /////////////////////浏览器端预检查文件类型和大小////////////////////////
    //解释：增强用户体验，以下情况可早发现早提示不用麻烦服务端：
    //1.误选择超过规定大小的文件。js判断立马就能给出提示，如果直接扔给服务器会等N秒包post完毕后才报错，浪费资源和时间，另外也避免了误选择大文件导致卡死，比如点错选择了个几百兆的压缩包，js秒判断，保证网页不会被卡死
    //2.误选择非期望的文件类型。 js可秒判断，服务端要等N秒接收到post包后才能给出提示。
    ////////////////////////////////////////////////////////////////////////////
    var tmpFiles=document.all.file1.files;
    if(tmpFiles.length==0) return;//文件个数为0不继续
    for(var i=0; i< tmpFiles.length; i++){
        if(!/.(gif|jpg|jpeg|png)$/i.test(tmpFiles[i].name)){//方法一：通过文件名后缀判断
        // if(!/^image\//.test(tmpFiles[i].type)){ //方法二：通过type属性判断是否是image/开头的
            alert("不是图片类型！ 您上传的类型是：" + tmpFiles[i].type);
            $(this).val("");
            return false;
        }else if(tmpFiles[i].size>10*1024*1024){//限制文件大小10M，可根据需要修改
            alert("文件太大了！建议不超过10M，您上传的大小是：" + parseInt(tmpFiles[i].size/1024/1024) + "M");
            $(this).val("");
            return false;
        }
    }
    //==========================第一波骚操作 前端检查结束====================================

    /////////////////////////使用ajax方法提交数据///////////////////////////////
	$.ajax({
        url: "ajax_upload.asp",
        type: 'POST',
        cache: false,
        data: new FormData($("#form1")[0]),
        processData: false,
        contentType: false,
        success: function (backdata) {
			$("#result").append("<img src=" + backdata + ">");
            $("#img_urls").val($("#img_urls").val() + backdata + ",");
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            $("#result").html(XMLHttpRequest.status + errorThrown + " 发生意外错误，请检查并排除问题后重试。建议检查iis端“最大请求实体主体限制”，错误详情：" + XMLHttpRequest.responseText);
        }
    });
    //==========================第二波骚操作 上传处理结束================================
});

$("#get_img_urls").click(function(){
    alert($("#img_urls").val());
});
</script>
</html>