實現上傳圖片並預覽功能

這裏使用的是inputfile上傳文件的功能,在創建圖片時,將圖片上傳到項目目錄下,並將文件地址保存到數據庫中。

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>");

發佈了136 篇原創文章 · 獲贊 25 · 訪問量 32萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章