javascript的无刷新表单提交处理图片上传功能

  • 内容
  • 评论
  • 相关

最近在做一个网站联盟的项目,其中用到的身份证图片上传和营业执照的上传功能,功能来说不是特别复杂,没有裁切等功能,所以想着自己搞一个,下面就开始整理下自己的思路。

图片预览功能可以看下另外一篇文章,传送门

html代码

<div class="input_contain clearfix">
    <span class="tit">身份证正面</span>
    <form id="file_form1" method="post" action="/league/UploadFile" target="file_iframe1" enctype="multipart/form-data">
        <input class="text" type="file" id="idcard_file1" name="idcard_file" style="width:190px;" accept="image/jpeg,image/png">
        <i class="sprite sprite_delete"></i>
    </form>
    <iframe style="display:none;" id="file_iframe1" name="file_iframe1"></iframe>
    <div class="tip"><span>(支持格式:jpg、png、jpeg,大小不超过2M)</span></div>
</div>

上面的代码就是用form表单做到无刷新提交的,form表单的target属性值为隐藏的iframe的name值,下面介绍下target的属性

描述
_blank  在新窗口/选项卡中打开。
_self 在同一框架中打开。(默认)
_parent 在父框架中打开。
_top  在整个窗口中打开。
framename  在指定的框架中打开。






在这儿我想到一个在input中添加formtarget属性,它的属性值同上表格,只不过它是html5的新特性,它会覆盖<form>元素的target属性。

form元素的enctype属性

描述
application/x-www-form-urlencoded 在发送前编码所有字符(默认)(空格转换为 "+" 加号,特殊符号转换为 ASCII HEX 值)
multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。
text/plain 空格转换为 "+" 加号,但不对特殊字符编码。


js代码

//下面介绍图片大小限制方法
file_size: function(param){
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
var size = 0;
if(isIE){
    var path = param.value;
    var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
    var file = fileSystem.GetFile(path);
    size = file.Size;
}else{
    size = param.files[0].size;
}
return size / 1024 / 1024;
}

//正面身份证上传
$("#idcard_file1").change(function(){
    if($("#idcard_file1").val() != ''){
        if(_this._file_size(document.getElementById('idcard_file1')) > 2){
            alert('大小超过2M了');
            return false;
        }
        $("#file_form1").submit();
    }
});
$("#file_iframe1").load(function(){
    var data = $(window.frames['file_iframe1'].document.body).html();
    if(data != null){
        $('[name=idcard_img1]').val(JSON.parse(data).data.path);
    }
});

评论

0条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注