Javascript 如何在“添加/删除动态字段”中上载时重命名图像_Javascript_Php

Javascript 如何在“添加/删除动态字段”中上载时重命名图像

javascript php

Javascript 如何在“添加/删除动态字段”中上载时重命名图像,javascript,php,Javascript,Php,我正在创建一个项目，其中创建了几个动态添加/删除字段。每件事都很完美，没有任何问题我已经创建了添加/删除图像文件字段。当我上传图像时，它被完美地上传了。但我希望使用rand（）函数对这些图像进行重命名 <?php if ( isset( $_POST['project_draft'] ) ) { $member_details->member_image = array_map( 'sanitize_file_name', $_FILES['member_image']['na

我正在创建一个项目，其中创建了几个动态添加/删除字段。每件事都很完美，没有任何问题

我已经创建了添加/删除图像文件字段。当我上传图像时，它被完美地上传了。但我希望使用

rand（）

函数对这些图像进行重命名

<?php

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

$member_details->member_image = array_map( 'sanitize_file_name', $_FILES['member_image']['name'] );
$member_details->member_name = array_map( 'sanitize_text_field', $_POST['member_name'] );
$member_details->member_role = array_map( 'sanitize_text_field', $_POST['member_role'] );
$member_details->member_email = array_map( 'sanitize_text_field', $_POST['member_email'] );
$member_details->member_facebook_id = array_map( 'sanitize_text_field', $_POST['member_facebook_id'] );

$member_details_encode = wp_json_encode( $member_details );

  global $wpdb;

  $members_result = $wpdb->insert( 'wpxa_project_members',

         array( 

              'project_id'     => $_SESSION['project_id'],
              'author_id'      => $post_author,
              'project_members' => $member_details_encode

              ),

         array( 

              '%d',
              '%d',
              '%s'

      )

    );

for($i=0; $i < count( $_FILES['member_image']['name'] ); $i++) {

$profile_image_folder = "profile-images/";
$profile_image_name = $_FILES['member_image']['name'][$i];
$profile_image_path = trim( $profile_image_folder . basename( $profile_image_name ) );
$profile_image_temp = $_FILES['member_image']['tmp_name'][$i];

move_uploaded_file( $profile_image_temp, $profile_image_path );

}

}

?>

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

    <div class="panel panel-default">

      <div class="panel-heading"><center><b>Team Members</b></center></div>

      <div class="panel-body">

    <div class="row">

      <div class="col-md-4">

      <div class="thumbnail">

        <img src="<?php echo esc_url( site_url('/img/blank-image.png') ); ?>" id="member_image0" alt="">

      </div>

      <div class="form-group">

        <label class="btn btn-success btn-block btn-file">Add Image<input type="file" name="member_image[]" onchange="preview_member(event, 0)" style="display: none;"></label>

      </div>

      </div>

      <div class="col-md-8">

      <div class="form-group">
        <label for="member_name">Member Name <b style="color:#FF0000;">*</b></label>
        <input type="text" class="form-control" name="member_name[]" placeholder="">
      </div>

      <div class="form-group">
        <label for="member_role">Role in Project <b style="color:#FF0000;">*</b></label>
        <input type="text" class="form-control" name="member_role[]" placeholder="">
      </div>

      <div class="form-group">
        <label for="member_email">Email address <b style="color:#FF0000;">*</b></label>
        <input type="email" class="form-control" name="member_email[]" placeholder="">
      </div>

      <div class="form-group">
        <label for="member_facebook_id">Facebook Username <b style="color:#FF0000;">*</b></label>
        <input type="text" class="form-control" name="member_facebook_id[]" placeholder="">
      </div>          

      </div>

    </div>

    <button type="button" class="btn btn-success btn-block" id="add-member-fields"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add Member</button>

    <br>

    <div id="member-fields">

    </div>

      </div>

    </div>

<input class="btn btn-warning btn-block" type="submit" name="project_draft" value="Draft" style="border-radius: 0px;">

</form>

    <script type='text/javascript'>

    var i = 0;

    function preview_member(event, inp) {
      var reader = new FileReader();
      console.log(inp);
      reader.onload = function() {
        var output = document.getElementById("member_image" + inp);
        output.src = reader.result;
      };

      reader.readAsDataURL(event.target.files[0]);
    }

    jQuery(document).ready(function($) {
      //fadeout selected item and remove
      $(document).on("click", "#remove-member-fields", function(event) {
        event.preventDefault();
        $(this)
          .parent()
          .fadeOut(300, function() {
            $(this).empty();
            return false;
          });
      });

      //add input
      $("#add-member-fields").click(function() {
        i++;

      var rows = `<div class="project-members-fields"><div class="row"><div class="col-md-4"><div class="thumbnail"><img src="<?php echo esc_url( site_url('/img/blank-image.png') ); ?>" id="member_image${i}" alt=""></div><div class="form-group"><label class="btn btn-success btn-block btn-file">Add Image<input type="file" name="member_image[]" onchange="preview_member(event, ${i})" style="display: none;"></label></div></div><div class="col-md-8"><div class="form-group"><label for="member_name">Member Name <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_name[]" placeholder=""></div><div class="form-group"><label for="member_role">Role in Project <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_role[]" placeholder=""></div><div class="form-group"><label for="member_email">Email address <b style="color:#FF0000;">*</b></label><input type="email" class="form-control" name="member_email[]" placeholder=""></div><div class="form-group"><label for="member_facebook_id">Facebook Username <b style="color:#FF0000;">*</b></label><input type="text" class="form-control" name="member_facebook_id[]" placeholder=""></div></div></div><button type="button" class="btn btn-danger btn-block" id="remove-member-fields"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove Member</button><br></div></div></div>`;

        $(rows)
          .fadeIn("slow")
          .appendTo("#member-fields");
        return false;
      });
    });

    </script>


团队成员
“id=”member_image0“alt=”“>
添加图像
成员名称*
项目中的角色*
电子邮件地址*
Facebook用户名*
添加成员


var i=0；
功能预览\成员（事件，inp）{
var reader=new FileReader（）；
控制台日志（inp）；
reader.onload=函数（）{
var输出=document.getElementById（“成员图像”+inp）；
output.src=reader.result；
};
reader.readAsDataURL（event.target.files[0]）；
}
jQuery（文档）.ready（函数（$）{
//淡出所选项目并删除
$（文档）。在（“单击”，“删除成员字段”，函数（事件）{
event.preventDefault（）；
$（本）
.parent（）
.fadeOut（300，函数（）{
$（this.empty（）；
返回false；
});
});
//添加输入
$（“#添加成员字段”）。单击（函数（）{
i++；
var rows=`“id=“member_image${i}”alt=”“>添加ImageMember Name*项目中的角色*电子邮件地址*Facebook用户名*删除成员
`；
$（行）
.fadeIn（“慢”）
.appendTo（“#成员字段”）；
返回false；
});
});

我主要用这个：

/*Upload image*/
$target_dir = "profile-images/";
$temp = explode(".",$_FILES["member_image"]["name"][$i]);
$target_file = $target_dir .sha1(uniqid(mt_rand(), true)) . '.' .end($temp);
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
$upload = move_uploaded_file($_FILES["member_image"]["tmp_name"][$i], $target_file);
/*Upload image*/

$target_文件=$target_dir.sha1（uniqid（mt_rand（），true））。'。完(临时);为您完成这项工作
$profile_image_name = $_FILES['member_image']['name'][$i];

到
为确保此图像（文件名）不存在，您可以这样做：
do {
    $profile_image_name = rand(1000,9999) . $_FILES['member_image']['name'][$i];
    $profile_image_path = trim( $profile_image_folder . basename( $profile_image_name ) );
}while( is_file( $profile_image_path ) );

编辑
<?php

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

for($i=0; $i < count( $_FILES['member_image']['name'] ); $i++) {
    $profile_image_name = rand(1000,9999) . $_FILES['member_image']['name'][$i];
    // MOVE YOUR FILE UPLOAD HERE!
    // ...
}


$member_details->member_image = array_map( 'sanitize_file_name', $profile_image_name );
...


谢谢@Himas，我正在使用JSON编码函数。如何在插入database.OK时重命名文件尽管有JSON编码功能，但我们使用的是相同的上传功能。让我进一步解释一下，最好在上传到服务器并插入到数据库之前重命名图像，以避免图像未找到问题（数据库中的路径名称和图像名称不同）。所以，只需更改与您相同的参数，就可以使用相同的代码。您能告诉我如何在member\u details\u encode=wp\u json\u encode（$member\u details）中重命名文件吗让我直说吧。。。这是多次上传，对吗？因此，您也需要在for循环中填写$member\u详细信息。然后，如果您使用我之前编写的代码，并将其应用于数组填充$member\u details->member\u image=array\u map（'sanitize\u file\u name'，sha1（uniqid（mt\u rand（），true））。.end（$temp））；试试看。嗨，皮兰谢谢，你能告诉我如何在member\u details\u encode=wp\u json\u encode（$member\u details）中重命名文件吗
@Minesh只需先重命名文件，别忘了更改$member\u details->member\u image=array\u映射（'sanitize\u file\u name'，$\u FILES['member\u image']['name'）
到$member\u details->member\u image=array\u map（'sanitize\u file\u name'，$profile\u image\u name）我按照你的指南创建了代码。文件夹中的文件已正确更新，但在数据库中显示为NULL。$member\u details->member\u image=array\u map（'sanitize\u file\u name'，$profile\u image\u name）的问题
是因为它没有捕获新名称，因此当值插入数据库时，它的成员\u image getsNULL@Minesh我再次编辑了编辑，希望您现在就可以：）
<?php

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

for($i=0; $i < count( $_FILES['member_image']['name'] ); $i++) {
    $profile_image_name = rand(1000,9999) . $_FILES['member_image']['name'][$i];
    // MOVE YOUR FILE UPLOAD HERE!
    // ...
}


$member_details->member_image = array_map( 'sanitize_file_name', $profile_image_name );
...

<?php

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

$member_image_names = array_map( 'sanitize_file_name', $_FILES['member_image']['name'] );

foreach ( $member_image_names as $member_image_name ) {

    $member_image_newname[] = get_current_user_id() . "_" . time() . "_" . rand() . "_" . $member_image_name;

}

$member_details->member_image = $member_image_newname;
$member_details->member_name = array_map( 'sanitize_text_field', $_POST['member_name'] );
$member_details->member_role = array_map( 'sanitize_text_field', $_POST['member_role'] );
$member_details->member_email = array_map( 'sanitize_text_field', $_POST['member_email'] );
$member_details->member_facebook_id = array_map( 'sanitize_text_field', $_POST['member_facebook_id'] );

$member_details_encode = wp_json_encode( $member_details );

  global $wpdb;

  $members_result = $wpdb->insert( 'wpxa_project_members',

         array( 

              'project_id'     => $_SESSION['project_id'],
              'author_id'      => $post_author,
              'project_members' => $member_details_encode

              ),

         array( 

              '%d',
              '%d',
              '%s'

      )

    );

if ( ! empty( $members_result ) ) {

$push = json_decode($member_details_encode, true);
$count_member = count( $push['member_image'] );

for ( $u = 0; $u < $count_member; $u++ ) {
 $coco = $push['member_image'][$u]; 

$profile_image_folder = "profile-images/";
$profile_image_path = trim( $profile_image_folder . basename( $coco ) );
$profile_image_temp = $_FILES['member_image']['tmp_name'][$u];

move_uploaded_file( $profile_image_temp, $profile_image_path ); 

}

}

}

?>