ajax 上传图片 无需插件

前端之家收集整理的这篇文章主要介绍了ajax 上传图片 无需插件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在你的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;
                }
            }
        }
原文链接:https://www.f2er.com/ajax/161820.html

猜你在找的Ajax相关文章