Question

我有一个包含文件的表单。我想执行服务器端验证，然后才上传文件（因为每个文件都会使请求变大）。

有没有光滑的方法，不包括序列化表单的数据和运行ajax？

我不正在寻找类似的东西：

var formData = $('#form').serializeArray();
$.post(url, formData, function(res){
    if(res.isValid)
       $('#form').submit();
});

Answer 1

尝试这样的事情（对于客户端验证），点击提交按钮

var file = $('#file_upload').prop("files")[0]; //file_upload is form's id
var name = file.name;
var size = file.size;
var type = file.type;

if (type != 'image/png' && type != 'image/jpeg' )throw {"msg": 'Invalid image type'}

if (size > 1024 * 1024 * 2 )throw {"msg": 'Invalid image size'}

对于上传前的AJAX 服务器端验证，您需要通过Ajax发送文件对象（不建议使用***，可能在少数旧浏览器中无法使用）

  try {

    var formObj = new FormData($('form')[1]); //File Object

    $.ajax({
      url: "YOUR URL", // do the SERVER SIDE VALIDATION here 
      data: formObj,
      processData: false,
      contentType: false,
      dataType:'json',
      type: 'POST',
      success: function(data){
        // Success code
      }
    }); 

  }catch (e) {
    console.log(e.msg);
  }

Answer 2

out.html是切入点。 submitValidate在iframe（in.html）中提交表单。服务器响应中的JavaScript代码段（confirm.html）将数据库记录传递给validateClientSideAndUpload，后者设置隐藏字段并在父窗口中向服务器提交表单。服务器将文件移动到适当的位置，并创建与id指定的记录的关联。作为概念证明发布。

<强> out.html

<script>
function submitValidate() {
    document.getElementById('validate-frame')
        .contentDocument.querySelector('form').submit();
}
function validateClientSideAndUpload(id) {
    if(document.getElementById('file').value === '') {
        alert('Select file');
        return;
    }
    document.getElementById('record-id').value = id;
    var form = document.querySelector('form');
    if confirm('Upload file?') {
        form.submit();
    }
}
</script>

<iframe src="in.html" id="validate-frame"></iframe>
<form>
    <input type="file" id="file"/>
    <input type="hidden" id="record-id"/>
</form>
<button onclick="submitValidate()">Save</button>

in.html （新/无效）

<form action="confirm.html">
    <label>Name</label>
    <input type="text" placeholder="data">
</form>

confirm.html （成功）

<script>
window.onload = function() {
    parent.validateClientSideAndUpload(/* server generated record id */);
}
</script>

发布表单而不上传文件以进行验证

2 个答案: