测试图:
<!DOCTYPE html> <html> <head> <meta name="referrer" content="no-referrer"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <title>MiSu免费图床 - 4399稳定图片外链服务 - jkzf.pp.ua</title> <link rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://lib.ba omitu.com/prettify/latest/prettify.css"> <script rel="stylesheet" src="https://lib.baomitu.com/layer/3.1.1/mobile/layer.js"></script> <style type="text/css"> body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,'sans-serif';background: url(https://cdn.cnbj1.fds.api.mi-img.com/middle.community.vip.bkt/0de5301b02a4de26c9b57ddd709329fc); background-size: cover;} @font-face {font-family: 'webfont_2'; src: url('//at.alicdn.com/t/webfont_bar76uyhrpd.eot'); /* IE9*/ src: url('//at.alicdn.com/t/webfont_bar76uyhrpd.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('//at.alicdn.com/t/webfont_bar76uyhrpd.woff') format('woff'), /* chrome、firefox */ url('//at.alicdn.com/t/webfont_bar76uyhrpd.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('//at.alicdn.com/t/webfont_bar76uyhrpd.svg#思源黑体-极细') format('svg'); /* iOS 4.1- */ } .text-center{text-align: center;} .text-white{color: #FFF;} .header,.footer{margin: 30px;color:#fff;} .title1{font-size: 20px;} .title2{font-size: 24px;font-family:"webfont_2" !important;} .jumbotron{margin: auto;text-align: center;background-color: rgba(255, 255, 255, .3);} .jumbotron input[type=file] {opacity:0;width:102px;height:31px;position:absolute;display:inline-block;} .preview {color: #fff;} .preview img {max-width: 10%;} .preview p {word-break: break-all;word-wrap: break-word;font-size: 13px !important;} .form-control:focus{background-color: rgba(255, 255, 255, .3);} </style> </head> <body> <div> <div> <div class="span12 header text-center"> <p>© jkzf.pp.ua</p> <p>4399图片外链服务 稳定不掉线 免费使用</p> </div> <div class="col-md-8 col-xs-10 jumbotron" style="margin:auto;"> <div> <input type="file" accept="image/*" multiple> <button type="button" class="btn btn-primary btn-sm">选择本地图片</button> <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#url_upload_model">上传远程图片</button> </div><hr> <textarea id="url-res-txt" rows="5" placeholder="上传后的图片外链地址将显示在此处,下方会同时显示外链地址和预览图。"></textarea> <div> <hr> </div> <span><b>温馨提示:</b> 本站不存储且无权管理上传的图源,图源均存放在4399服务器,切勿上传违反法规图源,否则后果自负。</span> </div> <div class="footer text-center"> <a target="_blank">© 2019 Powered by MisuCloud</a> </div> </div> </div> <div id="url_upload_model" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> <h4 id="myModalLabel">上传远程图片</h4> </div> <div> <p> 请在下方输入远程图片地址~每行一个~ </p> <textarea name="urls" rows="3" id="urls"></textarea> </div> <div> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" onclick="url_upload();">提交</button> </div> </div> </div> </div> <script src="https://lib.baomitu.com/jquery/3.4.0/jquery.min.js" type="text/javascript"></script> <script src="https://lib.baomitu.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js" type="text/javascript"></script> <script type="text/javascript"> var url = 'https://jkzf.pp.ua/uploads/api/4399up.php'; $(document).ready(function() { $("input[type='file']").change(function(e) { file_upload(this.files) }); var obj = $('body'); obj.on('dragenter', function(e) { e.stopPropagation(); e.preventDefault() }); obj.on('dragover', function(e) { e.stopPropagation(); e.preventDefault() }); obj.on('drop', function(e) { e.preventDefault(); file_upload(e.originalEvent.dataTransfer.files) }); }); function file_upload(files){ if (files.length == 0) return alert('请选择图片文件!'); for(var j = 0,len = files.length; j < len; j++){ console.log(files[j]); let imageData = new FormData(); imageData.append("file", 'multipart'); imageData.append("Filedata", files[j]); $.ajax({ url: url, type: 'POST', data: imageData, cache: false, contentType: false, processData: false, dataType: 'json', // 图片上传成功 success: function (result) { if (result.code == 0){ $('.preview').append('<div><img src="'+result.url+'" ><code>'+result.url+'</code></div>'); $('textarea').val(result.url); }else{ layer.msg('第'+j+'个图片上传失败'); } }, // 图片上传失败 error: function () { console.log('图片上传失败'); } }); } } function url_upload(){ var urls = $('#urls').val(); if (urls == false) return alert('请输入图片链接!'); var UrlArr = urls.split("\n"); $('#url_upload_model').modal('hide'); for(var j = 0,len = UrlArr.length; j < len; j++){ console.log(UrlArr[j]); $.getJSON(url, {url: UrlArr[j]}, function(result, textStatus) { if (result.code == 0){ $('.preview').append('<div><img src="'+result.url+'" ><code>'+result.url+'</code></div>'); $('textarea').val(result.url); }else{ layer.msg('第'+j+'个图片上传失败'); } console.log(result); }); } } </script> </body> </html>
还没有评论,来说两句吧...