html input type=file 文件上传; 图片上传; 图片闪烁
生活随笔
收集整理的這篇文章主要介紹了
html input type=file 文件上传; 图片上传; 图片闪烁
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
(1)input file 對(duì)話框和 獲取選中文件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head><title>無(wú)標(biāo)題頁(yè)</title><script type="text/javascript"> function showPath(){//openfileDialog 和獲取路徑 document.getElementById("path").innerText=document.getElementById("selFile").value; }</script> </head> <body> <input id="selFile" type="file" onchange ="showPath()"/> <div id="path"></div> </body> </html>?
(2)asp.net上傳文件服務(wù)端腳本
http://msdn.microsoft.com/en-us/library/system.web.ui.htmlcontrols.htmlinputfile.aspx
?客戶端(.aspx)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="pages_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"><title>上傳圖片</title> </head> <body><form id="form1" runat="server"><div>選擇要上傳的文件<input id="File1" type="file" runat ="server" /><p>上傳后的名稱(不含拓展名)<input id="Text1" type="text" runat="server" /></p><p><span id="Span1" style="font: 8pt verdana;" runat="server" /></p><p><input type="button" id="Button1" value="Upload" onserverclick="Button1_Click" runat="server" /></p></div></form> </body> </html>服務(wù)端
using System; using System.Collections; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq;public partial class pages_Default : System.Web.UI.Page {protected void Button1_Click(object Source, EventArgs e){int extIndex = File1.PostedFile.FileName.LastIndexOf('.');string ext =File1.PostedFile.FileName.Substring(extIndex);if (Text1.Value == ""){Span1.InnerHtml = "必須選擇要上傳的文件";return;}string dir = HttpContext.Current.Server.MapPath("../photos/buildings/");//設(shè)置在服務(wù)端的保存路徑 MapPath("")獲取的是頁(yè)面在服務(wù)端的物理路徑if (File1.PostedFile.ContentLength > 0){try{File1.PostedFile.SaveAs(dir + Text1.Value + ext);Span1.InnerHtml = "File uploaded successfully to <b>" +dir+Text1.Value + ext + "</b> on the Web server.";}catch (Exception exc){Span1.InnerHtml = "Error saving file <b>" +dir+Text1.Value + ext + "</b><br />" + exc.ToString() + ".";}}} }?
(3)圖片預(yù)覽功能
轉(zhuǎn)載自：上善若水?http://www.cnblogs.com/load/archive/2012/03/06/2381657.html
最近項(xiàng)目中用到的圖片上傳前預(yù)覽功能，兼容IE6-9，FF <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><body><input type=file name="doc" id="doc" onchange="javascript:setImagePreview();"> <p> <div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" /></div> </p> <script> function setImagePreview() {var docObj=document.getElementById("doc");var imgObjPreview=document.getElementById("preview");if(docObj.files && docObj.files[0]){//火狐下，直接設(shè)img屬性 imgObjPreview.style.display = 'block';imgObjPreview.style.width = '300px';imgObjPreview.style.height = '120px'; //imgObjPreview.src = docObj.files[0].getAsDataURL();//火狐7以上版本不能用上面的getAsDataURL()方式獲取，需要一下方式 imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);}else{//IE下，使用濾鏡 docObj.select();var imgSrc = document.selection.createRange().text;var localImagId = document.getElementById("localImag");//必須設(shè)置初始大小 localImagId.style.width = "300px";localImagId.style.height = "120px";//圖片異常的捕捉，防止用戶修改后綴來(lái)偽造圖片 try{localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;}catch(e){alert("您上傳的圖片格式不正確，請(qǐng)重新選擇!");return false;}imgObjPreview.style.display = 'none';document.selection.empty();}return true;} </script> </body> </html>(4)靜態(tài)頁(yè)+handler實(shí)現(xiàn)上傳功能
頁(yè)面和js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>添加樓房</title><link rel="Stylesheet" href ="../css/AddBuilding.css" /><link rel="Stylesheet" href="../css/button.css" /><script type="text/javascript" src="../scripts/AddBuilding.js"></script> </head> <body onload ="getLocation()"> <form action="../AddedHandlers/BuildingUnitRoomHandler.ashx?type=AddBuilding" method ="post" enctype="multipart/form-data"> <input type="text" class="nodisplay" name="inpLocation" id="inpLocation"/> <div id="Left"><label>樓房名稱</label><input type="text" name="BuildingName" id="BuildingName"/></br> <label>所在社區(qū)</label><input type="text" name="CommunityName" id="CommunityName"/></br> <p id="lbAddress"><span>地</br></br></br></br></br>址</span></p><textarea name="Address" id="Address"></textarea> </div> <div id="Right"><div id="localImag"><img id="Photo" alt="樓房照片" src="../images/尚未上傳圖片.jpg"/></div><p id="pBD"><input type="file" id="inpFile" name="inpFile" onchange ="checkFormat()"/><img id="imgDelete" alt="清空" title ="清空?qǐng)D片" src="../images/icons/PNG/onebit_33.png" onclick ="clearImage()"/></p></div> <div id="Bottom"><input type="submit" id="btnSave" class="normalButton" value="確定"/><input type="button" id="btnReturn" class ="normalButton" value="返回" onclick="javascript:close()"/></div> </form> </body> </html>?
window.onload =function(){ getLocation();} var formatchecker=true; function checkName(){if(document.getElementById("BuildingName").value==""){alert("建筑名稱不能為空");return;} } function clearImage(){document.getElementById("Photo").src=""; } String.prototype.GetValue = function(parm) {var reg = new RegExp("(^|&)" + parm + "=([^&]*)(&|$)");var r = this.substr(this.indexOf("\?") + 1).match(reg);if (r != null) return unescape(r[2]); return null; } function getLocation(){//記錄坐標(biāo)document.getElementById("inpLocation").value=location.search.GetValue("Location"); } function checkFormat(){var extIndex=document.getElementById("inpFile").value.lastIndexOf('.');var ext=document.getElementById("inpFile").value.substr(extIndex).toLowerCase();if(ext!=".jpg"&&ext!=".png"&&ext!=".bmp"&&ext!=".gif"&&ext!=".jpeg"){alert("只能上傳jpg,png,bmp,gif,jpeg格式的圖片");document.getElementById("Photo").src="../images/尚未上傳圖片.jpg";formatchecker=false;return;}formatchecker =true;setImagePreview();//預(yù)覽圖片 }function setImagePreview() {//圖片預(yù)覽功能var docObj=document.getElementById("inpFile");var imgObjPreview=document.getElementById("Photo");if(docObj.files && docObj.files[0]){//火狐下，直接設(shè)img屬性imgObjPreview.style.display = 'block';imgObjPreview.style.width = '300px';imgObjPreview.style.height = '120px'; //imgObjPreview.src = docObj.files[0].getAsDataURL();//火狐7以上版本不能用上面的getAsDataURL()方式獲取，需要一下方式 imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);}else{//IE下，使用濾鏡 docObj.select();var imgSrc = document.selection.createRange().text;var localImagId = document.getElementById("localImag");//必須設(shè)置初始大小localImagId.style.width = "200px";localImagId.style.height = "200px";//圖片異常的捕捉，防止用戶修改后綴來(lái)偽造圖片try{localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;}catch(e){alert("您上傳的圖片格式不正確，請(qǐng)重新選擇!");return false;}imgObjPreview.style.display = 'none';document.selection.empty();}return true;}?
handler獲取文件
else if (reqtype == "AddBuilding") {string buildingName = context.Request["BuildingName"].ToString();string communityName = context.Request["CommunityName"].ToString();string address=context.Request["Address"].ToString();string location = context.Request["inpLocation"].ToString();double longitude = Convert.ToDouble(location.Split(',')[0]);double latitude = Convert.ToDouble(location.Split(',')[1]);double altitude = Convert.ToDouble(location.Split(',')[2]);double heading = Convert.ToDouble(location.Split(',')[3]);double tilt = Convert.ToDouble(location.Split(',')[4]);double range = Convert.ToDouble(location.Split(',')[5]);HttpFileCollection hfc = HttpContext.Current.Request.Files; //獲取文件,保存圖片HttpPostedFile hpf=hfc[0];int extIndex = hpf.FileName.LastIndexOf('.');string ext = hpf.FileName.Substring(extIndex);string fileName = Guid.NewGuid().ToString();string dir = HttpContext.Current.Server.MapPath("../photos/buildings/");hpf.SaveAs(dir + fileName+ext);BuildingUnit.AddBuilding(buildingName, longitude, latitude, altitude, heading, tilt, range, communityName, address, fileName+ext);return;}form的4個(gè)要點(diǎn)：
? ?(1)action指向handler?type ??
? ?(2)method必須設(shè)置post
? ?(3)enctype="multipart/form-data"
? ?(4)INPUT type=file?元素必須出現(xiàn)在 form元素內(nèi)。
參考資料：http://www.hbcms.com/main/dhtml/objects/input_file.html
?
5.圖片閃爍功能
?原理：(1)setTimeout控制閃爍。 clearTimeout停止閃爍
?????????(2)每500ms，變更visibility實(shí)現(xiàn)顯隱效果
<html> <head> <script type="text/javascript"> var c=0 var t function timedCount() { document.getElementById('txt').value=c c=c+1 t=setTimeout("timedCount()",1000) }function stopCount() { clearTimeout(t) } </script> </head><body> <form> <input type="button" value="開(kāi)始計(jì)時(shí)！" onClick="timedCount()"> <input type="text" id="txt"> <input type="button" value="停止計(jì)時(shí)！" onClick="stopCount()"> </form>?
轉(zhuǎn)載于:https://www.cnblogs.com/imihiroblog/archive/2012/09/29/2708552.html
總結(jié)
以上是生活随笔為你收集整理的html input type=file 文件上传; 图片上传; 图片闪烁的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 使用Flex Bison 和LLVM编写
- 下一篇： Wix学习整理（2）——HelloWor