這裏使用的是input的file上傳文件的功能,在創建圖片時,將圖片上傳到項目目錄下,並將文件地址保存到數據庫中。
Css樣式:
#pic {
width: 100px;
height: 100px;
border-radius: 50%;
cursor: pointer;
}
</style>
Js樣式:
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function () {
$("#pic").click(function () {
$("#upload").click(); //隱藏了input:file樣式後,點擊頭像就可以本地上傳
$("#upload").on("change", function () {
var objUrl = getObjectURL(this.files[0]); //獲取圖片的路徑,該路徑不是圖片在本地的路徑
if (objUrl) {
$("#pic").attr("src", objUrl); //將圖片路徑存入src中,顯示出圖片
alert(objUrl);
}
});
});
});
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
</script>
HTml樣式:
<img id="pic" class="upHeadImgBtn" style="height:60px;" runat="server" src="images/0.jpg" alt="" />
<input id="upload" runat="server" name="file" accept="image/*" type="file" style="display: none" />
C#後臺:
FUWUOTO.FuWuOtoServer.sper.Up_Loadcs up = new FUWUOTO.FuWuOtoServer.sper.Up_Loadcs();
string name = up.UpNewsFile(upload, "cc");//name就是對應的是項目下的圖片路徑,需要將地址保存到數據庫中
if (name != "0" && name != "-1")
{
Session["imapath"] = name;
ViewState.Remove("Linkurls");
ViewState["Linkurls"] = name;
}
else if (name == "0")
{
Response.Write("<Script>alert('僅限制上傳圖片格式文件!');</Script>");
}
else if (name == "-1")
{
Response.Write("<Script>alert('圖片太大,請重新上傳!');</Script>");
}
else
{
Response.Write("<Script>alert('圖片上傳失敗!');</Script>");