如何在提交事件之间持久化文件上传表单数据

Question

我试图在更改其他表单切换/参数时保留上传的文件信息，并避免每次都重新上传文件。是否可以保留文件上传数据？

表单的 HTML

<form method="POST" action="" enctype="multipart/form-data">

<input type="file" name="fileUpload" id="fileUpload">

<input type="submit" value="Upload This" name="upload">

<input type="submit" value="Preview" name="preview">

<div class="col text-center justify-content-center">

<div class="bmd-form-group">

<label class="bmd-label-static" for="txtcolor">Choose the Text Color</label>

<input type="color" id="txtcolor" name="txtcolor" value="#000000">

<label for="body">Body</label>

</div>

</div>

<div class="col text-center justify-content-center">

<div class="form-check">

<label class="form-check-label">

<input id="iversion" class="form-check-input" name="invertBox" type="checkbox" value="">Invert

<span class="form-check-sign">

<span class="check"></span>

</span>

</label>

</div>

</div>

<?php

if($previewOk){

    echo "<img class='w-100 h-100' src='data:image/jpeg;base64, $imgData'  />"; ?>

<?php } ?>

<a href="<?php $add_to_cart = do_shortcode('[add_to_cart_url id="'.$post->ID.'"]'); echo $add_to_cart;?>"class="more">Buy now</a>

</form>

PHP

$previewOk=0;

if($_FILES["fileUpload"]["tmp_name"]){

    $myfile=$_FILES["fileUpload"]["tmp_name"];

}

if(!empty($_POST) && $_SERVER['REQUEST_METHOD'] == 'POST'){

    $file_url = move_file_test(); //moves file to directory

    $theid = create_download(); //creates a file link

    create_download_version($theid, $file_url); //more file stuff

}

if(isset($_POST['txtcolor'])){

    $color = $_POST['txtcolor'];

    $myfile = change_color($myfile); //some function that alters the $myfile and regenenerates

}

if(isset($_POST["preview"])) {

    $imgData = base64_encode(file_get_contents($myfile));

    previewOk = 1;

}

我想$myfile在提交表单后留下来，只在上传不同的文件时更新。目的是$myfile再次以其他基于表单的操作进行访问 - 例如：更改上传的图像文件的背景颜色并预览它，而无需启动文件浏览器并重新开始每次迭代。

Answer 1

您可以使用 ajax 来选择是否将文件与其他字段一起发送。会话可用于在请求之间保留 file_url。我在下面给你一个算法，如何组织一切。HTML<form id="form-id" method="POST" action="" enctype="multipart/form-data">&nbsp; &nbsp; <input type="file" name="fileUpload" id="fileUpload">&nbsp; &nbsp; <div class="col text-center justify-content-center">&nbsp; &nbsp; &nbsp; &nbsp; <div class="bmd-form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="bmd-label-static" for="txtcolor">Choose the Text Color</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="color" id="txtcolor" name="txtcolor" value="#000000">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="body">Body</label>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col text-center justify-content-center">&nbsp; &nbsp; &nbsp; &nbsp; <div class="form-check">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="form-check-label">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id="iversion" class="form-check-input" name="invertBox" type="checkbox" value="">Invert <span class="form-check-sign"><span class="check"></span> </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <input type="submit" id="submit" name="submit" value="Submit">&nbsp; &nbsp; <div id="preview"></div>&nbsp; &nbsp; <div id="add_to_cart"></div></form>JavascriptjQuery( document ).ready(function( $ ) {&nbsp;&nbsp; &nbsp; // Prevent form submission&nbsp; &nbsp; $('#form-id').on( "submit", function( event ) {&nbsp; &nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; });&nbsp; &nbsp; // Handle file selection and upload&nbsp; &nbsp; $('#fileUpload').on("change", function() {&nbsp; &nbsp; &nbsp; &nbsp; var files = this.files;&nbsp; &nbsp; &nbsp; &nbsp; if (!files.length) return;&nbsp; &nbsp; &nbsp; &nbsp; var file = files[0];&nbsp; &nbsp; &nbsp; &nbsp; var data = new FormData();&nbsp; &nbsp; &nbsp; &nbsp; data.append( 'action', 'upload' );&nbsp; &nbsp; &nbsp; &nbsp; data.append( 'nonce', window.wp_data.nonce );&nbsp; &nbsp; &nbsp; &nbsp; data.append( 'file', file );&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: window.wp_data.ajax_url,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'POST',&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: data,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; cache: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataType: 'json',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; processData: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; contentType: false,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function( respond, status, jqXHR ){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if( typeof respond.error === 'undefined' ){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#preview').html( respond.data.preview );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#add_to_cart').html( respond.data.add_to_cart );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; error: function( jqXHR, status, errorThrown ){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log( 'AJAX requert error: ', status, jqXHR );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; });&nbsp; &nbsp; // Processing other fields on Submit button click. This is a case if you have to process many fields.&nbsp; &nbsp; $('#submit').on( "click", function( event ) {&nbsp; &nbsp; &nbsp; &nbsp; var data = {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; action: 'process',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; nonce: window.wp_data.nonce&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; $.each(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#form_id').serializeArray(),&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function (i, field) {&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (data[field.name]) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (!data[field.name].push) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data[field.name] = [data[field.name]];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data[field.name].push(field.value || '');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data[field.name] = field.value || '';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; &nbsp; $.post(&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; window.wp_data.ajax_url,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; function( respond ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#preview').html( respond.data.preview );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#add_to_cart').html( respond.data.add_to_cart );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "json"&nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; });});PHP// This is an idea how to store uploaded file_url: use session varsadd_action( 'init', function () {&nbsp; &nbsp; if( !session_id() ) {&nbsp; &nbsp; &nbsp; &nbsp; session_start();&nbsp; &nbsp; }}, 1);// A trick to use nice wordpress ajax hooks at frontendadd_action( 'wp_head', function () {&nbsp; &nbsp; $variables = array (&nbsp; &nbsp; &nbsp; &nbsp; 'ajax_url' => admin_url('admin-ajax.php'), // Pass ajax_url to frontend&nbsp; &nbsp; &nbsp; &nbsp; 'nonce' => wp_create_nonce('my-nonce') // Security&nbsp; &nbsp; );&nbsp; &nbsp; echo(&nbsp; &nbsp; &nbsp; &nbsp; '<script type="text/javascript">window.wp_data = ' .&nbsp; &nbsp; &nbsp; &nbsp; json_encode($variables) .&nbsp; &nbsp; &nbsp; &nbsp; ';</script>'&nbsp; &nbsp; );} );// Handle upload requestadd_action( 'wp_ajax_upload', function () {&nbsp; &nbsp; check_ajax_referer( 'my-nonce', 'nonce' ); // Check security&nbsp; &nbsp; $data = [];&nbsp; &nbsp; if ( isset( $_FILES['fileUpload'] ) and !$_FILES['fileUpload']['error'] ) {&nbsp; &nbsp; &nbsp; &nbsp; $file_url = save_file_to_directory();&nbsp; &nbsp; &nbsp; &nbsp; #_SESSION['file_url'] = $file_url; // Save file_url to session for future use&nbsp; &nbsp; &nbsp; &nbsp; $data['preview'] = generate_preview( $file_url );&nbsp; &nbsp; &nbsp; &nbsp; $data['add_to_cart'] = generate_add_to_cart();&nbsp; &nbsp; &nbsp; &nbsp; wp_send_json_success( $data );&nbsp; &nbsp; }&nbsp; &nbsp; else {&nbsp; &nbsp; &nbsp; &nbsp; wp_send_json_error();&nbsp; &nbsp; }&nbsp; &nbsp; wp_die();} );// Handle fields request. I separate it for better understanding. You may merge this logic with wp_ajax_upload.&nbsp;add_action( 'wp_ajax_process', function () {&nbsp; &nbsp; check_ajax_referer( 'my-nonce', 'nonce' ); // Check security&nbsp; &nbsp; $file_url = #_SESSION['file_url']; // Remember $file_url from session&nbsp; &nbsp; $data = [];&nbsp; &nbsp; if ( isset( $_REQUEST['txtcolor'] ) ) {&nbsp; &nbsp; &nbsp; &nbsp; $data['preview'] = apply_txtcolor( $file_url );&nbsp; &nbsp; &nbsp; &nbsp; $data['add_to_cart'] = generate_add_to_cart();&nbsp; &nbsp; }&nbsp; &nbsp; if ( isset( $_REQUEST['invertBox'] ) ) {&nbsp; &nbsp; &nbsp; &nbsp; $data['preview'] = apply_invertBox( $file_url );&nbsp; &nbsp; &nbsp; &nbsp; $data['add_to_cart'] = generate_add_to_cart();&nbsp; &nbsp; }&nbsp; &nbsp; wp_send_json_success( $data );&nbsp; &nbsp; wp_die();} );根据情况，某些时刻可以做得更好或不同的方式。这只是算法的思想。请记住在适当的时候删除图像文件，以防您不再需要它。