Question

我正在使用ajax从表单上载文件。一切正常，正在上传文件，但是在上传文件页面后重新加载后，当我单击“上传”按钮上传文件时。上传文件后如何防止页面重新加载？

HTML：

 <form enctype="multipart/form-data">
    <input type="file" accept=".xlsx" id="file-upload" name="file"/>
    <input id="form_submit"  value="Upload" type="submit"                           name="form_submit"/>
    </form>

jQuery：

 $('#form_submit').on('click', function() {
    var file_data = $('#file-upload').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file', file_data);
    $.ajax({
    url: 'file_upload_parser.php', // point to server-side PHP script 
    dataType: 'text',
    cache: false,
    contentType: false,
    processData: false,
    data: form_data,                         
    type: 'post',
    success: function(data){
    alert(data);
    }
    });
    });

PHP：

 if ( 0 < $_FILES['file']['error'] ) {
    echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else {
    move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' .  $_FILES['file']['name']);
    echo "Sucess";
    }

Answer 1

只需将输入类型“提交”更改为“按钮”即可。因为输入类型“ submit”确实具有提交表单的默认行为。如果将输入类型更改为“按钮”，并且类型按钮没有默认行为。

<input id="form_submit" value="Upload" type="submit" name="form_submit"/>

TO

<button id="form_submit"  value="Upload" type="button" name="form_submit">Upload</button>

如果要使用jquery进行此操作，则只需在jquery函数中进行一些更改，就可以防止提交按钮的默认行为，如下所示。

$('#form_submit').on('click', function(e) {
    e.preventDefault();
    var file_data = $('#file-upload').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file', file_data);
    $.ajax({
    url: 'file_upload_parser.php', // point to server-side PHP script 
    dataType: 'text',
    cache: false,
    contentType: false,
    processData: false,
    data: form_data,                         
    type: 'post',
    success: function(data){
    alert(data);
    }
    });
    });

您可以自由使用

<input id="form_submit" value="Upload" type="submit" name="form_submit"/>

Answer 2

使用jQuery if (AppSetting.getValue(activity, Config.AUDIO, false)) { mMediaRecorder.setVideoSource(MediaRecorder.VideoSource.CAMERA); mMediaRecorder.setAudioSource(MediaRecorder.AudioSource.MIC); mMediaRecorder.setMaxDuration(duration); mMediaRecorder.setProfile(profile); } else { mMediaRecorder.setVideoSource(MediaRecorder.VideoSource.CAMERA); mMediaRecorder.setOutputFormat(profile.fileFormat); mMediaRecorder.setVideoEncoder(profile.videoCodec); mMediaRecorder.setVideoEncodingBitRate(profile.videoBitRate); mMediaRecorder.setVideoFrameRate(profile.videoFrameRate); mMediaRecorder.setVideoSize(profile.videoFrameWidth, profile.videoFrameHeight); mMediaRecorder.setMaxDuration(duration); }方法。

不是这样

event.preventDefault()

像这样使用

$("#form_submit").click(function(event){ 
  // Your upload code here     
  event.preventDefault();
});

将$("#form_submit").click(function(event){ event.preventDefault(); // Your upload code here });放在函数顶部以防止出现默认行为，然后编写代码。

为什么使用ajax上传文件时页面会重新加载？

2 个答案: