ajax upload file

ajax文件上传功能

by a13xs

HTML

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<form id="upload_form" enctype="multipart/form-data" method="post">
                <div class="upload-area">
                    <i class="fa fa-plus" aria-hidden="true"></i>
                    <!--<input type="file" class="upload" id="file" name="file"/>-->
                    <input type="file" accept=".apk,.ipa" class="upload" id="file"/>
                    <div class="progress" style="display: none">
                        <div class="progress-bar progress-bar-success  progress-bar-striped active" role="progressbar"
                             aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                            <span class="sr-only">45% Complete</span>
                        </div>
                    </div>
                </div>
                <div class="upload-info clearfix text-left" style="display: none">
                    <p class="name"><span>Name：</span><strong></strong></p>
                    <p class="size"><span>Size：</span><strong></strong></p>
                    <p class="error" style="display: none;color:#f00"><span>Error：</span><strong></strong></p>
                </div>

                <div class="upload-error" id="error" style="display: none">
                    <strong>仅支持apk及ipa文件！</strong>
                </div>

                <button class="btn btn-success" id="upload">上传文件</button>
            </form>

CSS

.upload-area {
  border-radius: 5px;
  border: 2px dashed #9a9fad;
  color: #9a9fad;
  font-weight: bold;
  padding: 50px 0;
  margin-bottom: 10px;
  position: relative;
  text-align: center
}

.upload-area i {
  cursor: pointer;
  font-size: 30px;
  font-weight: normal;
}

.upload-area .upload {
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -12px;
  margin-left: -136px;
  cursor: pointer;
}

.upload-area .progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin-bottom: 0;
  height: 8px;
  border-radius: 0 0 4px 4px;
}

.upload-info {
  border: 1px dashed #ccc;
  padding: 10px;
  background: #f3f9ff;
  font-size: 12px;
  border-radius: 5px;
  margin-bottom: 10px;
  color: #767a86;
  font-weight: bold;
  line-height: 2;
  cursor: pointer;
}

.upload-info .name {
  width: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
}

.upload-info p {
  margin-bottom: 0;
}

.upload-info span {
  width: 45px;
  display: inline-block;
}

.upload-error {
  border: 1px dashed #d8b9b9;
  padding: 10px;
  background: #f2dede;
  font-size: 12px;
  border-radius: 5px;
  margin-bottom: 10px;
  color: #ab5656;
  font-weight: bold;
  line-height: 2;
  cursor: pointer;
}

JavaScript

var file = $("#file");
var uploadFileName = $(".upload-info .name strong");
var uploadFileSize = $(".upload-info .size strong");

file.on("change", function (e) {
            var val = $("#file").val().toLowerCase();
            var regex = new RegExp("(.*?)\.(ipa|apk|zip)$");
            var ss = val.replace(/^.*[\\\/]/, '');
            //重置上传进度及错误信息
            $(".progress").hide();
            $(".progress-bar").hide();
            $(".upload-info .error").hide();

            if (!(regex.test(ss))) {
                $(".upload-info").hide();
                $("#error").show().html("仅支持apk及ipa文件！");
                $("#upload").attr("disabled", "disabled");
                $(".progress").hide();
            } else {
                var fileLength = e.currentTarget.files.length;
                if (fileLength === 0) {
                    return;
                }
                //展示上传文件的信息
                var name = e.currentTarget.files[0].name;
                var size = ( e.currentTarget.files[0].size / 1024 / 1024).toFixed(1);
                uploadFileName.html(name).attr("title", name);
                uploadFileSize.html(size + "M");
                $(".upload-info").show();
                $("#error").hide();
                $("#upload").removeAttr("disabled", "");
                //开始上传
                $("#upload").on("click", function (e) {
                    console.log(1)
                    e.preventDefault();
                    $("#upload").attr("disabled", "disabled");
                    $(".progress-bar").show();
                    $(".progress-bar").removeClass("progress-bar-danger");
                    $.ajax({
                        url: "/upload",
                        type: "POST",
                        async: true,
                        cache: false,
                        data: new FormData($("#upload_form")[0]),
                        processData: false,
                        contentType: false,
                       ...