XMLHttpRequest上传文件

最新推荐文章于 2024-07-14 18:10:54 发布

「已注销」

最新推荐文章于 2024-07-14 18:10:54 发布

阅读量4.1k

点赞数

分类专栏： JSP 文章标签： javascript xml xmlhttprequest

本文链接：https://blog.csdn.net/maoliangfei2011/article/details/52160088

版权

JSP 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!doctype html>
<html>
<jsp:include page="../common/head.jsp" />
<body>
<div class="kks-wrapper">
	<jsp:include page="../common/header.jsp" />
	<jsp:include page="../common/left.jsp" />
	<div class="kks-page">
	<form method="post" class="form-horizontal p-t10" id="add_Form">
		<div class="form-group" id="xuke">
			<label for="" class="col-xs-2 text-right control-label">文件：</label>
			<div class="col-xs-5">
				<!--<input type="file" id="" class="form-control" value="upload/img9.jpg">-->
				<li id="li_image"><a href="javascript:;" class="add_pic"><input id="input_upload_image" class="form-control img_file" type="file" mmultiple/></a></li>
				<input type="hidden" value="" id="images"/>
			</div>
			<div class="col-xs-5"><a href="javascript:;" class="text-blue l-h-32"><i class="iconfont f-s18"></i> 许可证.jpg</a></div>
			<div class="col-xs-offset-2 col-xs-9 text-gray p-t10">支持jpg、jpeg、png、bmp格式图片，大小不超过2M</div>
		</div>
		<div class="form-group">
			<div class="col-xs-offset-2 col-xs-10">
				<button type="button" class="btn btn-primary f-s14 m-r20" οnclick="uploadFile();" id="confirm">确定</button><button type="button" class="btn btn-default f-s14" οnclick="parent.layer.closeAll()">取消</button>
			</div>
		</div>
	</form>
</div>
</div>
<!-- 所属类目选择 -->
<script type="text/javascript">
	function uploadFile(){
        var currentfile = document.getElementById('input_upload_image').files;
        var file = currentfile[0];
        if(file == null || typeof(file) == "undefined" || file == undefined){
        	layer.msg("请选择文件！",{icon:11,time:1500});
        	return;
        }
        var formData = new FormData();
        formData.append('file', file);

        var xhr = new XMLHttpRequest();
        xhr.open('post', "http://192.168.0.202:10000/blue/uploadFile.json", true);

        xhr.upload.onprogress = function(e) {
            if (e.lengthComputable) {
                var percentage = (e.loaded / e.total) * 100;
            }
        };

        xhr.onerror = function(e) {
            console.error('An error occurred while submitting the form. Maybe your file is too big');
            layer.msg('An error occurred while submitting the form. Maybe your file is too big',{time:1500});
            return;
        };

        xhr.onload = function() {
            if (xhr.status === 200) {
                var obj = JSON.parse(xhr.responseText);
                if(obj.code == 200000){
                    layer.msg('上传成功！',{icon:1,time:1500});
                }else{
                    layer.msg(obj.msg,{icon:11,time:1500});
                }
                //showImage(obj.files[0]);
            } else {
                console.error('Something went terribly wrong...');
            }
        };
        xhr.send(formData);
	}
</script>
</body>
</html>