这里使用的是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>");