- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>jQuery 版文件上传</title>
- <script src="https://cdn.bootCSS.com/jquery/1.9.1/jquery.js"></script>
- <style type="text/css">
- *{margin:0;padding:0;}
- .fileSubmit{background:lightgray;height:900px;padding-top:1px;}
- .fileSubmit .detail{margin:70px 0 0 100px;}
- .fileSubmit .detail .item{font-size: 17px;height:40px;line-height: 40px;}
- .fileSubmit .detail .item span{display:inline-block;font-size: 17px;}
- .fileSubmit .detail .item button{display:inline-block;font-size: 17px;margin-left: 50px;width:60px;height:25px;border-radius: 5px;}
- .fileSubmit .detail .item input{font-size: 15px;margin-left: 50px;width:210px;height:25px;}
- </style>
- </head>
- <body>
- <div class="fileSubmit">
- <ul class="detail">
- <li class="item">名称:<span id="name">工业监测审计系统</span></li>
- <li class="item">型号:<span id="type">INA-200</span></li>
- <li class="item">硬件版本:<span id="hardwareVersion">INA-200-V1802005C</span></li>
- <li class="item">软件版本:<span id="softwareVersion">V2.0</span><button id="upgradeButton">升级</button><input type="file" id="upgradeInput"/></li>
- <li class="item">序列号:<span id="serialNumber">CY18-NA2B-A018-5081</span></li>
- <li class="item">制造商:<span id="manufacturer"> 钱老六 (北京) 有限公司</span></li>
- <li class="item">出厂日期:<span id="productionDate">2018 年 2 月 10 日</span></li>
- </ul>
- </div>
- </body>
- </html>
- <script type="text/javascript">
- $("#upgradeInput").change(function(){
- console.log($("#upgradeInput").val());
- });
- $(function () {
- $("#upgradeButton").click(function () {
- var upgradeInput = $("#upgradeInput").val();
- console.log(typeof (upgradeInput));
- if (upgradeInput === "" || upgradeInput.size <= 0) {
- alert("请上传文件");
- return;
- }
- var formFile = new FormData();
- formFile.append("action", "UploadVMKImagePath");
- formFile.append("file", upgradeInput);
- $.ajax({
- url: "/Admin/Ajax/VMKHandler.ashx",
- data: formFile,
- type: "Post",
- dataType: "json",
- cache: false,
- processData: false,
- contentType: false,
- success: function (result) {
- alert("上传完成!");
- }
- })
- })
- })
- </script>
来源: http://www.qdfuns.com/article/40901/47f1f35ca31348df27225875c09679b8.html