javascript 实现表单提交,文件上传

form 2021-11

文中的代码 JavaScript 和 jQuery 混用，阅读时注意区分

即时上传图片示例

//css样式：目的将表单样式修改成提交按钮
<style>
.file {
    position: relative;
    display: inline-block;
    background: #335883;
    border: 1px solid #335883;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: hsl(240, 44%, 96%);
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
</style>
//html元素，文件上传功能的表单绑定事件，实现脚本操作
<span href="javascript:;" class="file">
上传
<input type="file" name="logo4big" onchange="uploadimg(this)">
</span>
//javascript 脚本
<script type="text/javascript">
    //上传图片
    function uploadimg(obj)
    {
        var formData = new FormData();
        formData.append(obj.name, obj.files[0]);
        formData.append('filename', obj.name);
        formData.append('cmp_id', "{$data.cmp_id}");
		$.ajax({
            url: "team.php?act=uploadimg",
            type: "POST",
            data:formData,
            cache:false,         //不设置缓存
            processData: false,  // 不处理数据
            contentType: false,  // 不设置内容类型
            success:function (data) {
                //服务器返回上传文件的地址
                $('.'+obj.name).attr('src', JSON.parse(data).url);
            },
            error:function (data) {
                console.log(data);
            }
        }); 
    }
</script>

删除元素

<table id="addTr" style="display: none;">
    <tr>
        <td>
            <input type="hidden" name="zcmp_kfo_id[]" value="">
        </td>
        <td>
            <input type="text" name="kf_val[]" value="" >
        </td>
        <td>
            <input type="text" name="kf_code[]" value="" >
        </td>
        <td>
            <input type="text" name="show_order[]" value="" >
        </td>
        <td>
            <a class="bbtxn" onclick="$(this).parent().parent().remove()" title="删除">删除</a>
        </td>
    </tr>
</table>

复制元素

tr_data = $('#addTr').children().eq(0).html()

表单提交

<form method="post" action="xxx.php" name="theForm" enctype="multipart/form-data" onsubmit="return validate()">
    <input type="submit" value="提交" />
</form>
<script type="text/javascript">
    document.forms['theForm'].elements['branch_id'].value;
    return document.forms['theForm'].submit();// 该方法提交表单的方式与用户单击 Submit 按钮一样，但是表单的 onsubmit 事件句柄不会被调用。
    return false;
</script>

• onsubmit只能表单上使用,提交表单前会触发
• onclick是按钮等控件使用, 用来触发点击事件。
• 在提交表单前，一般都会进行数据验证，可以选择在submit按钮上的onclick中验证,也可以在onsubmit中验证。但是onclick比onsubmit更早的被触发。
• onsubmit处理函数返回false，onclick函数返回false，都不会引起表单提交。

用户点击按钮-》触发onclick事件-》onclick返回true或未处理onclick -》触发onsubmit事件 -》onsubmit未处理或返回true -》提交表单

ajax 表单提交

$.ajax({
type: "POST", 
url: www.baidu.com,
data: $('#formId').serialize(),
success: function (data) {
},
error: function(data) {
}
});

ajax通信

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
  // 通信成功时，状态值为4
  if (xhr.readyState === 4){
    if (xhr.status === 200){
      console.log(xhr.responseText);
    } else {
      console.error(xhr.statusText);
    }
  }
};
xhr.onerror = function (e) {
  console.error(xhr.statusText);
};
xhr.open('GET', '/endpoint', true);
xhr.send(null);
$.ajax({
	url: "team.php?act=uploadimg",
	type: "POST",
	data:formData,
	cache:false,         //不设置缓存
	processData: false,  // 不处理数据
	contentType: false,  // 不设置内容类型
	success:function (data) {
	    //服务器返回上传文件的地址
		$('.'+obj.name).attr('src', JSON.parse(data).url);
    },
    error:function (data) {
        console.log(data);
    }
});

ecshop ajax.call

var Ajax = Transport;
Ajax.call = Transport.run;
主要看 transport.js 文件

Ajax.call('xxx.php?is_ajax=1&act=get_bumenid', 'bumen_id='+bumen_id, function(result)
{
    var sel = document.forms['theForm'].elements['cn_name'];
    var userList = result.content;
        if (userList)
    {
        sel.options.length=0; 
        var opt1 = document.createElement("OPTION");
        opt1.value = '';
        opt1.text = '请选择用户名...';
        sel.options.add(opt1);
        for (i = 0; i < userList.length; i++)
        {
            var opt = document.createElement("OPTION");
            opt.value = userList[i].name;
            opt.text  = userList[i].name;
            sel.options.add(opt);
        }
    }
}, 'POST', 'JSON');

参考资料：
表单，FormData 对象
https://www.cnblogs.com/ahudyan-forever/p/5795463.html
https://www.w3school.com.cn/jsref/met_form_submit.asp
https://www.jb51.net/article/164036.htm
https://wangdoc.com/javascript/bom/xmlhttprequest.html
https://jquery.cuishifeng.cn/jQuery.Ajax.html