图片上传插件用法,JS语法

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图片上传插件用法,JS语法相关的知识,希望对你有一定的参考价值。

注意点:

作为文件域(<input type="file">)必须要有name属性,如果没有name属性,上传之后服务器是获取不到图片的。如:正确的写法是<input type="file" id="file1" name="file1" />

dataType参数一定要大写。如:dataType: ‘HTML‘。

 

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语法的主要内容,如果未能解决你的问题,请参考以下文章

KindeEditor图片上传插件用法

KindeEditor图片上传插件用法

图片上传插件梳理与学习

uniapp中使用插件进行上传附件(word,表格,图片等)

jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)

一款简单实用的上传文件图片插件并且兼容移动端zyupload.js