实现上传图片并预览功能

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