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']); } ?>
另外,关于目的地目录的几件事情:
- 确保你有正确的服务器path ,即从PHP脚本位置开始,上传目录的path是什么
- 确保它是可写的 。
还有一点关于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_filesize
和post_max_size
configuration值,并确保您的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); ?>