標籤：
花了一上午的時間理了下思路，整理了下上傳方面的問題。主要是關于格式的校正以及大小和數量的校正，可能有部分缺失，望大家提出，及時修正。
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>檔案上傳測試</title> <style type="text/css"> *{ margin: 0; padding: 0; } a{ text-decoration: none; } .filec{ display: block; position: absolute; top: 0; left: 0; width: 180px; height: 39px; cursor: pointer; opacity: 0; filter:alpha(opacity: 0); } .xhx{ width: 100px; height: 30px; border-bottom: 1px solid #000; display: inline-block; line-height: 24px; } .button{ width: 80px; height: 39px; line-height: 39px; border: 0; border-radius: 3px; } </style> </head> <body> <div class="xhx" id="xhx"> 請上傳檔案 </div> <input type="button" class="button" name="" id="" value="點我上傳" /> <input type="file" class="filec" name="test" id="file" onchange="javascript:setImagePreview();"> <div id="imgxx"></div> <script type="text/javascript"> //單圖片上傳 function setImagePreview() { var path = document.getElementById("file").value; // alert(path); // 分離名稱和尾碼 var path1 = path.split("."); var path2 = path1[path1.length - 1].toLowerCase() // 判斷格式 if(path2.localeCompare(‘docx‘) === 0 || path2.localeCompare(‘doc‘) === 0 || path2.localeCompare(‘pdf‘) === 0) { // alert("true"); // alert(path2); // 去除路徑和尾碼名，取檔案名稱 var pos1 = path.lastIndexOf("\\"); // alert(pos1); var pos2 = path.lastIndexOf("."); // alert(pos2); var pos = path.substring(pos1 + 1, pos2); var text =path.substring(pos1+1); document.getElementById("xhx").innerHTML=text; alert("上傳成功"); // alert(pos); // 擷取檔案地址 本地預覽 var file = document.getElementById("file"); var objectURL = window.URL.createObjectURL(file.files[0]);// alert(objectURL); } else if(path2.localeCompare(‘jpg‘) === 0 || path2.localeCompare(‘png‘) === 0) { var pos1 = path.lastIndexOf("\\"); // alert(pos1); var pos2 = path.lastIndexOf("."); // alert(pos2); var pos = path.substring(pos1 + 1, pos2);// alert("上傳成功"); var file = document.getElementById("file"); var objectURL = window.URL.createObjectURL(file.files[0]);// alert(objectURL); // 判斷大小 // var obj_img = document.getElementById(‘tempimg‘); // obj_img.dynsrc=obj_file.value; filesize = file.files[0].size;// alert(filesize); var imgmax = 2 * 1024 * 1024; if(filesize > imgmax) { alert("檔案大小超出範圍"); } else { alert("上傳成功"); // 建立圖片元素 var imgxx = document.getElementById("imgxx"); // 添加img var img = document.createElement("img"); var div = document.createElement("div"); img.setAttribute("id", pos); div.setAttribute("id", pos); imgxx.appendChild(img); imgxx.appendChild(div); div.innerHTML=‘<a title="移除本圖片" href="javascript:void(0);" style="float: left;margin-left: -22px;z-index: 22;background: #fff;">×</a>‘ img.width = "100"; img.src = objectURL; img.style.float="left" img.style.marginLeft="20px" div.setAttribute("onclick", "javascript:removeElement(this)"); var imglength = document.getElementById("imgxx").getElementsByTagName("img").length ;// alert(imglength); if(imglength>3){ alert("上傳完畢"); file.style.display="none";// alert(file.display); } } } else { alert("請上傳正確的格式"); } }// 刪除圖片 function removeElement(_element){ var _parentElement = _element.parentNode; var id=_element.id; document.getElementById(id).innerHTML = ""; document.getElementById(id).remove(); document.getElementById(id).remove(); file.value = ""; return;} </script> </body></html>
關於js上傳檔案的校正以及預覽
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
