利用jQuery实现新浪微博接口图片上传代码



7 25 9



特效描述:利用jQuery实现 新浪微博 接口图片 上传代码,利用jQuery实现新浪微博接口图片上传代码

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="css/font-awesome.css" rel="stylesheet">
<link href="css/jumbotron-narrow.css" rel="stylesheet">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="./picbed_files/dropdown.min.js"></script>

3. HTML代码

	<div class="container">
		<div class="header">
			<h2 class="hidden-xs">
				51前端,<small class="text-muted"> 全网CDN图床 不限流量 无限外链  永久免费 图床API</small>
			</h2>
			<h2 class="visible-xs">微博图床</h2>
			<h4 class="text-muted visible-xs">全网CDN图床 不限流量 无限外链  永久免费 图床API</h4>
		</div>
		<div class="jumbotron">
			<p class="lead">
				欢迎使用51前端图片免费上传系统<br>
			</p>
			<div class="mselector">
				<input type="file" accept="image/*" multiple="">
				<button type="button" class="btn btn-lg btn-info">选择本地图片</button>
				<button type="button" class="btn btn-lg btn-info" data-toggle="modal" data-target="#url_upload_model">上传远程图片</button>
			</div>
			<hr>
			<textarea id="url-res-txt" class="form-control" rows="5" placeholder="上传后的图片外链地址将显示在此处哦,下方会显示外链预览图。"></textarea>
			<div class="preview">
				<hr>
			</div>
		</div>
		<!-- url上传弹窗 -->
		<div id="url_upload_model" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
						<h4 class="modal-title" id="myModalLabel">上传远程图片</h4>
					</div>
					<div class="modal-body">
						<p class="lead">请在下方输入远程图片地址,每行一个</p>
						<textarea class="form-control" name="urls" rows="3" id="urls"></textarea>
						<p id="urlUploadNotice"></p>
					</div>
					<div class="modal-footer">
						<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>
		<div class="footer">
		</div>
	</div>
	<!-- <script src="./picbed_files/dropdown.min.js"></script> -->
	<script type="text/javascript">
		$(document).ready(function() {
    $('.picurl > input').bind('focus mouseover', function() {
        if (this.value) {
            this.select()
        }
    });
    $("input[type='file']").change(function(e) {
        images_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();
        images_upload(e.originalEvent.dataTransfer.files)
    })
});
var url_upload = function() {
    var urls = $("#urls").val();
    var url_arr = urls.split("\n");
    if (urls == "" || url_arr.length == 0) {
        alert("请贴入需要上传的网络图片地址.");
        return
    }
    $('#url_upload_model').modal('hide');
    $('.mselector > button')[1].innerHTML = '上传中';
    for (var i = 0; i < url_arr.length; i++) {
        $.ajax({
            url: 'https://zs.mtkan.cc/url_upload.php',
            type: 'POST',
            data: {
                url: url_arr[i]
            },
            cache: false,
            dataType: 'json',
            success: function(data) {
                if (typeof data.original_pic != 'undefined') {
                    $('#url-res-txt').append(data.original_pic + '\n');
                    $('.mselector > button')[1].innerHTML = '成功 ' + (i + 1) + '' + url_arr.length;
                    var apc = "<img src='" + data.original_pic + "' alt='" + data.original_pic + "'><br>";
                    $('.preview').css('display', 'block');
                    $(".preview>hr").after(apc)
                } else {
                    $('.mselector > button')[1].innerHTML = '第' + (i + 1) + '张上传失败'
                } if (typeof data.original_pic != 'undefined') {
                    $('.mselector > button')[1].innerHTML = '上传成功'
                } else {
                    $('.mselector > button')[1].innerHTML = '上传失败';
                    $('#url-res-txt').append(data.error_msg + '\n');
                    alert(data.error_msg)
                }
            },
            error: function(XMLResponse) {
                alert("error:" + XMLResponse.responseText)
            }
        })
    }
};
var images_upload = function(files) {
    var flag = 0;
    $('textarea').empty();
    $(files).each(function(key, value) {
        $('.mselector > button')[0].innerHTML = '上传中';
        image_form = new FormData();
        image_form.append('file', value);
        $.ajax({
            url: 'https://zs.mtkan.cc/upload.php',
            type: 'POST',
            data: image_form,
            mimeType: 'multipart/form-data',
            contentType: false,
            cache: false,
            processData: false,
            dataType: 'json',
            success: function(data) {
                flag++;
                if (typeof data.original_pic != 'undefined') {
                    $('#url-res-txt').append(data.original_pic + '\n');
                    $('.mselector > button')[0].innerHTML = '成功 ' + flag + '' + files.length;
                    var apc = "<img src='" + data.original_pic + "' alt='" + data.original_pic + "'><br>";
                    $('.preview').css('display', 'block');
                    $(".preview>hr").after(apc)
                } else {
                    $('.mselector > button')[0].innerHTML = '第' + flag + '张上传失败'
                } if (flag == $("input[type='file']")[0].files.length) {
                    if (typeof data.original_pic != 'undefined') {
                        $('.mselector > button')[0].innerHTML = '上传成功'
                    } else {
                        $('.mselector > button')[0].innerHTML = '上传失败';
                        $('#url-res-txt').append(data.error_msg + '\n');
                        alert(data.error_msg)
                    }
                }
            },
            error: function(XMLResponse) {
                alert("error:" + XMLResponse.responseText)
            }
        })
    })
};
document.onpaste = function(e) {
    var data = e.clipboardData;
    for (var i = 0; i < data.items.length; i++) {
        var item = data.items[i];
        if (item.kind == 'file' && item.type.match(/^image\//i)) {
            var blob = item.getAsFile();
            images_upload(blob)
        }
    }
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 切换按钮 表单 表单美化 表单插件 表单美化插件 头像上传 图片上传 文本框 text文本框

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到