重命名BLOB form.append

Question

好吧，我被困住了，我已經能夠成功上傳大小調整後的圖像/ blob到服務器文件夾。 The problem is that the image/blob upload is always called blob.有沒有辦法在客戶端更改名稱，或者我應該在服務器PHP端？
如果是的話可以請你給我一個例子這裏是2個腳本我使用與溝通

客戶端調整

<script> 
function handleFiles(){ 
var dataurl = null; 
var filesToUpload = document.getElementById('input').files; 
var file = filesToUpload[0]; 

// Create an image 
var img = document.createElement("img"); 
// Create a file reader 
var reader = new FileReader(); 
// Set the image once loaded into file reader 
reader.onload = function(e) 
{ 
    img.src = e.target.result; 

    img.onload = function() { 
     var canvas = document.createElement("canvas"); 
     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(img, 0, 0); 

     var MAX_WIDTH = 200; 
     var MAX_HEIGHT = 400; 
     var width = img.width; 
     var height = img.height; 

     if (width > height) { 
      if (width > MAX_WIDTH) { 
      height *= MAX_WIDTH/width; 
      width = MAX_WIDTH; 
      } 
     } else { 
      if (height > MAX_HEIGHT) { 
      width *= MAX_HEIGHT/height; 
      height = MAX_HEIGHT; 
      } 
     } 
     canvas.width = width; 
     canvas.height = height; 
     var ctx = canvas.getContext("2d"); 
     ctx.drawImage(img, 0, 0, width, height); 
     dataurl = canvas.toDataURL("image/jpeg",.2); 
     var blobBin = atob(dataurl.split(',')[1]); 
     var array = []; 
     for(var i = 0; i < blobBin.length; i++) { 
     array.push(blobBin.charCodeAt(i)); 
     } 
     var files = new Blob([new Uint8Array(array)], {type: 'image/jpg', name: ""}); 
     var filename = getFileName() 



     // Post the data 
     var fd = new FormData(); 
     fd.append("image",files); 
     $.ajax({ 
      url: 'http:///www.i-audit-jci.com/upload.php', 
      data: fd, 
      cache: false, 
      contentType: false, 
      processData: false, 
      type: 'POST', 
      success: function(data){ 
       $('#form_input')[0].reset(); 
       location.reload(); 
      } 
     }); 
    } // img.onload 
} 
// Load files into file reader 
reader.readAsDataURL(file); 
} 
</script> 

服務器PHP

<?php 
$upload_image = $_FILES["image"][ "name" ]; 
$a = ('" alt="" />'); 
$folder = "images/"; 
move_uploaded_file($_FILES["image"]["tmp_name"], "$folder".$_FILES["image"]["name"]);; 
$file = 'images/'.$_FILES["image"]["name"]; 
$uploadimage = $folder.$_FILES["image"]["name"]; 
$newname = $_FILES["image"]["name"]; 
$msg = ''; 
if($_SERVER['REQUEST_METHOD']=='POST'){ 
$a = ('" alt="" />'); 
$image = $_FILES['image']['tmp_name']; 
$img = file_get_contents($image); 
$con = mysqli_connect('mysql***','***','***','***') or die('Unable To connect'); 
$sql = ("INSERT into links (hyper_links) VALUES('<img src=\"\https://www.i-audit-jci.com/images/".$_FILES['image']['name']."$a')"); 

$stmt = mysqli_prepare($con,$sql); 

mysqli_stmt_bind_param($stmt, "s",$img); 
mysqli_stmt_execute($stmt); 

$check = mysqli_stmt_affected_rows($stmt); 
if($check==1){ 
    $msg = 'Successfullly UPloaded'; 
}else{ 
    $msg = 'Could not upload'; 
} 
mysqli_close($con); 
} 
?> 
<?php 
echo $msg; 
?> 

Answer 1

您可以設置File對象的名稱屬性傳遞給FormData的第三個參數FormData.append()函數

var blob = new Blob([123], { 
 
    type: "text/plain" 
 
}); 
 
var data = new FormData(); 
 
// set `blob` name to `"file.txt"` 
 
data.append("file", blob, "file.txt"); 
 

 
console.log(data.get("file"), data.get("file").name);