加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

ajax 上传图片 无需插件

发布时间:2020-12-16 01:28:57 所属栏目:百科 来源:网络整理
导读:在你的html 中加入以下html 代码 a class = "btn btn-danger" id = "logo" style= "position: relative" input type= "file" name = "files" id = "logo" style= "width: 100px;height:40px; position: absolute;top:-6px;left: -4px;opacity: 0; filter:alp

在你的html 中加入以下html 代码

<a class="btn btn-danger" id="logo" style="position: relative">
<input type="file" name="files" id="logo" style="width: 100px;height:40px; position: absolute;top:-6px;left: -4px;opacity: 0; filter:alpha(opacity=0)" />修改logo</a>

效果图

在你的html 加入以下js

$('#logo').on('change',function (){
            var $file = document.getElementById("logo").files[0];
            var $result = checkuplogo(document.getElementById("logo").files[0],1);
            if ($result !== -2) {
                var fd = new FormData();
                fd.append("files",$file);
                $.ajax({
                    url: '/Api/UpDown/ajax_upload',type: 'POST',data: fd,dataType:"json",processData: false,contentType: false
                }).done(function (data) {
                    alert(1);
                    var json = JSON.stringify(data);
                    if (data.status == 1) {
                       alert("成功");
                    } else if (data.status == 0) {
                       alert(data.msg);
                    }
                    if (data.status == '1') {
                        var d = data.data;
                        if (typeof d !== 'undefined' && d) {
                            $("#old_logo").attr("src",d);
                        }
                    }
                });
            }
        });
        function checkuplogo($up_file,$size) {
            var $filesize = $up_file.size;
            var $filetype = $up_file.type; //image/jpeg image/png audio/mp3 video/mp4 
            var $img_type = new Array("jpeg","jpg","png");
            var $filetype_arr = $filetype.split("/");
            if ($filetype_arr[0] === "image") {
                if ($.inArray($filetype_arr[1],$img_type) !== -1) {
                    if ($size === 1) {
                        if ($filesize > 300 * 1024) {
                           alert('confirm','提示',"你上传的logo图片为" + ($filesize / 1024).toFixed(2) + "kb,大小超过300kb"
                                    ); //不自动关闭
                            return -2;
                        }
                    }
                } else {
                    $.dialog('alert',"你上传的logo图片格式为" + $filetype_arr[1] + ",暂时只支持jpg或png"
                            ); //不自动关闭
                    return -2;
                }
            }
        }

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读