XMLHttpRequest上传文件

来源：互联网发布：七天网络阅卷查分编辑：程序博客网时间：2024/05/16 03:40
<%@ 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" onclick="uploadFile();" id="confirm">确定</button><button type="button" class="btn btn-default f-s14" onclick="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>
0 0