master

分支 (1)

管理

管理

master

movieweb
/
test.html

<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
		<script src="static/js/jquery-3.4.1.min.js"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
		<meta charset="utf-8">
		<title></title>
		<style>
			.nav-bar {
			    　　    border-top: 1px solid #9E9E9E;
			    　　    margin: 10px 0 20px;
			    　　}

			  　　  .nav-bar-title {
			      　　  margin: -13px 0 0 35px;
			      　　  background-color: white;
			      　　  padding: 0 10px;
			      　　  float: left;
			       　　 color: #199ED8;
			    　　}

			       .attachment-remove {
			            font-size: 25px;
			            color: red;
			            margin-left: 5px;
			            cursor: pointer;
			        }

			        .attachment-text-p {
			            border: 1px solid #c2cad8;
			            padding: 5px 5px;
			            margin: 0;
			            float: left;
			            height: 30px;
			            width: 90%;
			        }

			        .attachment-text-p + i {
			            float: left;
			            line-height: 30px !important;
			        }

			        .input-attachment {
			            width: 90% !important;
			            padding: 4px 12px !important;
			        }
		</style>
	</head>
	<body>
		<div id="tempalte">
		<form id="attachments3" enctype="multipart/form-data" class="form-horizontal" novalidate="novalidate">
		        <div class='form-body'>
		            <div class='form-group'>
		                <label class="control-label col-md-1">附件管理：</label>
		                <div class="col-md-4">
		                    <button id="selectFile" type="button" class="btn btn-default" @click="clik()">选择文件</button>
		                    <button id="attachmentUploadBtn3" type="button" class="btn btn-default">Upload</button>
		                </div>
		            </div>
		            <div class='form-group'>
		                <label class="control-label col-md-1">附件上传：</label>
		                <input id="attachmentInputs3" type="file" style="display: none;" @click="click1()"/>
		                <div id="attachmentText3" class="col-md-3">
		                </div>
		            </div>
		        </div>
		    </form>
			</div>
	</body>
	<script type="text/javascript" src="static/js/vue.js"></script>
	<script type="text/javascript" src="static/js/axios.min.js"></script>
	<script type="text/javascript" src="static/js/base.js"></script>
	<script type="text/javascript" src="static/js/cookie_utils.js"></script>
	<script type="text/javascript" src="static/js/utils.js"></script>
	<script>
		var hurl1=Baseurl+"/movieLaod/load";
		//存放file对象
		    var attachmentArray = [];
		    //attachment-remove
		    $("#attachmentText3").on("click", ".attachment-remove", function (even) {
		        //将值设置为"-1"
		        attachmentArray[$(this).data("index")] = "-1";
				//删除attachmentArray数据
		        attachmentArray.splice($(this).data("index"), 1);
		        //删除html对象
		        $(this).prev().prev().remove();
		        $(this).prev().remove();
		        $(this).remove();
				//重新排序标签data-index
				      $("#attachmentText3 i").each(function (index, element) {
				              $(element).attr("data-index", index);
				       });
		    });

		    //Select File
		    $("#selectFile").click(function (even) {
		        // 获取input
		        $("#attachmentInputs3").click();
		    });

		    //input change
		    $("#attachmentInputs3").change(function (even) {
		        // 获取input
		        var fileName = $(this).val();
		        var file = $(this)[0].files[0];
		        //是否选择了文件
		        if (fileName) {
		            attachmentArray.push(file);
		            $("#attachmentText3").append("<div><p class='attachment-text-p'>" + fileName + "</p><i data-index='" + (attachmentArray.length - 1) + "' class=\"fa fa-times attachment-remove\"></i></div>")
		        }
		    });

		    //upload3
		    $("#attachmentUploadBtn3").click(function (even) {
		        //这里只能手动注入
		                var formData = new FormData();
		                //遍历数据，手动注入formData
		                for (var i = 0; i < attachmentArray.length; i++) {
		                    let value = attachmentArray[i];
		                    if(value != "-1"){
		                        formData.append("attachment", value);
		                    }
		                }
		        formData.append("applyId", "123456");
		        console.log(formData.getAll("attachment"));
		        //执行上传
		        $.ajax({
		            url: hurl1,
		            type: "post",
		            data: formData,
		            processData: false,
		            contentType: false,
		            success: function (data) {
		            },
		            error: function (e) {
		            }
		        });
		    });
	</script>
</html>