jQueryAjax文件上传PHP

Question

jQueryAjax文件上传PHP

我想实现一个简单的文件上传在我的内联网页面，与最小的设置可能。

这是我的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"); 
        }
    });});

该网站的根目录中有一个名为“上载”的文件夹，其中包含“用户”和“IIS_USERS”的更改权限。

当我选择带有文件表单的文件并按下Upload按钮时，第一个警报返回“[ObjectFormData]”。第二个警报没有被调用，并且“上传”文件夹也是空的！？

有人能帮我找出什么不对劲吗？

另外，下一步应该是用服务器端生成的名称重命名文件。也许有人也能给我一个解决办法。

Answer 1

您需要一个运行在服务器上的脚本来将文件移动到上载目录。jQueryajax方法(在浏览器中运行)将表单数据发送到服务器，然后服务器上的脚本处理上载。下面是一个使用PHP的示例。HTML很好，但是更新JS jQuery脚本如下所示：$('#upload').on('click',&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;file_data&nbsp;=&nbsp;$('#sortpicture').prop('files')[0];&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;form_data&nbsp;=&nbsp;new&nbsp;FormData();&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;form_data.append('file',&nbsp;file_data); &nbsp;&nbsp;&nbsp;&nbsp;alert(form_data);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;$.ajax({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url:&nbsp;'upload.php',&nbsp;//&nbsp;point&nbsp;to&nbsp;server-side&nbsp;PHP&nbsp;script&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;dataType:&nbsp;'text',&nbsp;&nbsp;//&nbsp;what&nbsp;to&nbsp;expect&nbsp;back&nbsp;from&nbsp;the&nbsp;PHP&nbsp;script,&nbsp;if&nbsp;anything &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cache:&nbsp;false, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;contentType:&nbsp;false, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;processData:&nbsp;false, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data:&nbsp;form_data,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:&nbsp;'post', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;success:&nbsp;function(php_script_response){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert(php_script_response);&nbsp;//&nbsp;display&nbsp;response&nbsp;from&nbsp;the&nbsp;PHP&nbsp;script,&nbsp;if&nbsp;any &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});});现在，对于服务器端脚本，在本例中使用PHP。upad.php*运行在服务器上并将文件定向到上载目录的PHP脚本：<?php&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(&nbsp;0&nbsp;<&nbsp;$_FILES['file']['error']&nbsp;)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;echo&nbsp;'Error:&nbsp;'&nbsp;.&nbsp;$_FILES['file']['error']&nbsp;.&nbsp;'<br>'; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;move_uploaded_file($_FILES['file']['tmp_name'],&nbsp;'uploads/'&nbsp;.&nbsp;$_FILES['file']['name']); &nbsp;&nbsp;&nbsp;&nbsp;}?>另外，关于目标目录的一些事情：确保你有正确的服务器路径，即从PHP脚本位置开始，上传目录的路径是什么，以及确保它是可写.还有一些关于PHP函数的内容move_uploaded_file，用于upad.php剧本：move_uploaded_file( &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;this&nbsp;is&nbsp;where&nbsp;the&nbsp;file&nbsp;is&nbsp;temporarily&nbsp;stored&nbsp;on&nbsp;the&nbsp;server&nbsp;when&nbsp;uploaded &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;do&nbsp;not&nbsp;change&nbsp;this &nbsp;&nbsp;&nbsp;&nbsp;$_FILES['file']['tmp_name'], &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;this&nbsp;is&nbsp;where&nbsp;you&nbsp;want&nbsp;to&nbsp;put&nbsp;the&nbsp;file&nbsp;and&nbsp;what&nbsp;you&nbsp;want&nbsp;to&nbsp;name&nbsp;it &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;in&nbsp;this&nbsp;case&nbsp;we&nbsp;are&nbsp;putting&nbsp;in&nbsp;a&nbsp;directory&nbsp;called&nbsp;"uploads" &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;and&nbsp;giving&nbsp;it&nbsp;the&nbsp;original&nbsp;filename &nbsp;&nbsp;&nbsp;&nbsp;'uploads/'&nbsp;.&nbsp;$_FILES['file']['name']);$_FILES['file']['name']文件上传时的名称。你不用这个。您可以为文件指定任何名称(与服务器文件系统兼容)：move_uploaded_file( &nbsp;&nbsp;&nbsp;&nbsp;$_FILES['file']['tmp_name'], &nbsp;&nbsp;&nbsp;&nbsp;'uploads/my_new_filename.whatever');最后，要注意PHPupload_max_filesize和post_max_size配置值，并确保您的测试文件不超过任何一个。这里有一些帮助你检查PHP配置以及你是如何设置最大文件大小和POST设置.

Answer 2

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

Answer 3

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