jQuery AJAXfile uploadPHP

我想实现一个简单的file upload在我的Intranet页面,尽可能最小的设置。

这是我的HTML部分:

<input id="sortpicture" type="file" name="sortpic" /> <button id="upload">Upload</button> 

这是我的JS jquery脚本:

 $("#upload").on("click", function() { var file_data = $("#sortpicture").prop("files")[0]; var form_data = new FormData(); form_data.append("file", file_data); alert(form_data); $.ajax({ url: "/uploads", dataType: 'script', cache: false, contentType: false, processData: false, data: form_data, type: 'post', success: function(){ alert("works"); } }); }); 

在网站的根目录下有一个名为“uploads”的文件夹,其中更改了“users”和“IIS_users”的权限。

当我用文件格式select一个文件并按下上传button时,第一个警告返回“[对象FormData]”。 第二个提醒没有被调用,“上传”文件夹也是空的!?

有人可以帮我找出什么是错的?

另外下一步应该是,用服务器端生成的名称重命名文件。 也许有人可以给我一个这样的解决scheme。

您需要在服务器上运行的脚本将文件移动到上传目录。 jQuery ajax方法(在浏览器中运行)将表单数据发送到服务器,然后服务器上的脚本处理上载。 这里是一个使用PHP的例子。

你的HTML是好的,但更新你的JS jQuery脚本看起来像这样:

 $('#upload').on('click', function() { var file_data = $('#sortpicture').prop('files')[0]; var form_data = new FormData(); form_data.append('file', file_data); alert(form_data); $.ajax({ url: 'upload.php', // point to server-side PHP script dataType: 'text', // what to expect back from the PHP script, if anything cache: false, contentType: false, processData: false, data: form_data, type: 'post', success: function(php_script_response){ alert(php_script_response); // display response from the PHP script, if any } }); }); 

而现在的服务器端脚本,在这种情况下使用PHP。

upload.php :在服务器上运行的PHP脚本,并将文件导向上传目录:

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

另外,关于目的地目录的几件事情:

  1. 确保你有正确的服务器path ,即从PHP脚本位置开始,上传目录的path是什么
  2. 确保它是可写的

还有一点关于upload.php脚本中使用的PHP函数move_uploaded_file

 move_uploaded_file( // this is where the file is temporarily stored on the server when uploaded // do not change this $_FILES['file']['tmp_name'], // this is where you want to put the file and what you want to name it // in this case we are putting in a directory called "uploads" // and giving it the original filename 'uploads/' . $_FILES['file']['name'] ); 

$_FILES['file']['name']是上传文件的名称。 你不必使用它。 您可以给文件任何名称(服务器文件系统兼容)你想要的:

 move_uploaded_file( $_FILES['file']['tmp_name'], 'uploads/my_new_filename.whatever' ); 

最后,请注意您的PHP upload_max_filesizepost_max_sizeconfiguration值,并确保您的testing文件不超过。 这里有一些帮助您如何检查PHPconfiguration,以及如何设置最大文件大小和发布设置 。

 var formData = new FormData($("#YOUR_FORM_ID")[0]); $.ajax({ url: "upload.php", type: "POST", data : formData, processData: false, contentType: false, beforeSend: function() { }, success: function(data){ }, error: function(xhr, ajaxOptions, thrownError) { console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); } }); 

最好的file upload使用JQuery的Ajax与Materialise 点击这里下载

当你select图像时,图像将被转换为64位数据,你可以将它存储到数据库中,因此重量也会很轻。

这是接收上传文件的PHP文件

 <? $data = array(); //check with your logic if (isset($_FILES)) { $error = false; $files = array(); $uploaddir = $target_dir; foreach ($_FILES as $file) { if (move_uploaded_file($file['tmp_name'], $uploaddir . basename( $file['name']))) { $files[] = $uploaddir . $file['name']; } else { $error = true; } } $data = ($error) ? array('error' => 'There was an error uploading your files') : array('files' => $files); } else { $data = array('success' => 'NO FILES ARE SENT','formData' => $_REQUEST); } echo json_encode($data); ?>