圖片上傳插件用法,JS語法【三】

時間 2019-11-17

原文原文鏈接

注意點：javascript

做爲文件域(<input type="file">)必需要有name屬性，若是沒有name屬性，上傳以後服務器是獲取不到圖片的。如：正確的寫法是<input type="file" id="file1" name="file1" />html

dataType參數必定要大寫。如：dataType: 'HTML'java

一.html

<body>
    <p><input type="file" id="file1" name="file" /></p>
    <input type="button" value="上傳" />
    <p><img id="img1" alt="上傳成功啦" src="" /></p>
</body>

二.js

  <script src="jquery-1.7.1.js" type="text/javascript"></script>
    <script src="ajaxfileupload.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(":button").click(function () {
                ajaxFileUpload();
            })
        })
        function ajaxFileUpload() {
            $.ajaxFileUpload
            (
                {
                    url: '/upload.aspx', //用於文件上傳的服務器端請求地址
                    secureuri: false, //是否須要安全協議，通常設置爲false
                    fileElementId: 'file1', //文件上傳域的ID
                    dataType: 'json', //返回值類型 通常設置爲json
                    success: function (data, status)  //服務器成功響應處理函數
                    {
                        $("#img1").attr("src", data.imgurl);
                        if (typeof (data.error) != 'undefined') {
                            if (data.error != '') {
                                alert(data.error);
                            } else {
                                alert(data.msg);
                            }
                        }
                    },
                    error: function (data, status, e)//服務器響應失敗處理函數
                    {
                        alert(e);
                    }
                }
            )
            return false;
        }
    </script>

三.後臺

 protected void Page_Load(object sender, EventArgs e)
        {
            HttpFileCollection files = Request.Files;
            string msg = string.Empty;
            string error = string.Empty;
            string imgurl;
            if (files.Count > 0)
            {
                files[0].SaveAs(Server.MapPath("/") + System.IO.Path.GetFileName(files[0].FileName));
                msg = " 成功! 文件大小爲:" + files[0].ContentLength;
                imgurl = "/" + files[0].FileName;
                string res = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";
                Response.Write(res);
                Response.End();
            }
        }

四.JS前臺頁面判斷文件內容大小

 function change() {
        $('.imgupload').off("change");   //先關閉一次change
        $('.imgupload').on("change", "#filePicture", function () {
            var bool = testMaxSize(this.files[0]);   //調用方法
            if (bool) {
                $("#zt").text("移入可預覽文件");
                var files = window.URL.createObjectURL(this.files[0]);
                $('.laye_img').attr("src", files);
            } else {
                alert("圖片大小超過限制，請上傳小於1M體積！");
                $("#zt").text("選擇上傳圖片");
                $('.laye_img').attr("src", "");
            }
            imgfloat()//調用
        })
    }

  //判斷圖片大小
    function testMaxSize(file) {
        if (file) {
            var fileData = file;
            var size = fileData.size;   //注意，這裏讀到的是字節數
            maxSize = 1048576;   //轉化爲字節
            if (size <= maxSize) {
                return true;
            } else {
                return false;

            }
        }
    }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。