前端多文件上传

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<img id="picshow" width="200" height="200" src="" />
<form id="uploadForm" action="Upload" method="post" enctype="multipart/form-data">
<input id="File1" name="fileupload" accept="image/gif, image/jpeg" multiple="multiple" type="file" value="" />
<input id="btnImportOK" type="button" value="上传" />
</form>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {$ ("#btnImportOK").click(function () {

                var formData = new FormData($("#uploadForm")[0]);
                $.ajax({
                    type: "POST",
                    data: formData,
                    url: "/Home/Upload",
                    contentType: false,
                    processData: false,
                }).success(function (data) {
                    if (data.status) {
                        // 记录当前时间戳
                        var start_time = new Date().getTime();
                        // 创建对象
                        var img = new Image();
                        // 改变图片的src
                       // img.src = data.url; 此处注释是因为上传保存是路径是本地磁盘 浏览器被阻止访问 所以用了一个远程图片
                        img.src = "http://a0.att.hudong.com/05/23/01300000727181126443238971302.jpg";
                        // 定时执行获取宽高
                        var check = function () {
                            console.log(img.width);
                            // 只要任何一方大于0
                            // 表示已经服务器已经返回宽高
                            if (img.width > 0 || img.height > 0) {
    
                                clearInterval(set);
                          
                                    if (img.width > 210 || img.height > 210 || img.width < 190 || img.height < 190) {
                                        alert('建议列表图片尺寸为200*200');
                                        return;
                                    }
                                    $("#picshow").attr("src", img.src);
                                    $("#picshow").show();
                            }
                        };
    
                        var set = setInterval(check, 40);
                    } else {
                        console.log(data.msg);
                    }
    
                }).error(function (data) {
                    alert(data);
                    console.log(data);
                });
    
            });
            $("#picshow").hide();
        });
    </script>

</body>
</html>

前端多文件上传

推荐阅读更多精彩内容