09/10/2018, 23:13

Upload với AJAX và PHP

Em thử upload dùng ajax và php nhưng tại trang php ko nhận đc biến $_FILES, ai có thể chỉ cách thức hđ của upload file với ajax ko

chimtrum viết 01:23 ngày 10/10/2018

Trang php không nhận được biến $_FILES là do bạn gửi các thông tin đến trang upload bằng đối tượng XMLHttpRequest (?). Để trang nhận được biếtn $_FILES thì trong form phải có thuộc tính "enctype="multipart/form-data".

Một cách giải quyết nhanh nhất cho vấn đề này và mình thường xài đó là tạo 1 frameset với tỷ lệ là 0,100%.Lúc này sẽ có 1 frame ẩn đi.Tiếp theo tạo 1 form để gửi thông tin như trong 1 ứng dụng web truyền thống nhưng thêm vào thuộc tính "target" và gán cho tên của frame bạn đã cho ẩn đi.

Trong trang trả lại từ server bạn phải viết 1 hàm javascript để cập nhật nội dung trong frame chính và gọi hàm này khi sự kiện onload của thẻ <body> được gọi.

Nghe rắc rối quá. Sau đây là minh họa cho những gì mình nói.

1. Tạo 1 trang có 2 frame và làm ẩn đi 1 frame

Code:

<frameset rows="0%,100%" frameborder="no" border="0" framespacing="0">
  <frame src="about: blank" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />
  <frame src="upload.php" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset><noframes>

2. Trong trang upload có 1 form dùng để upload

Code:

<form name="upload_form" id="upload_form" enctype="multipart/form-data" action="doUpload.php" method="post" target="topFrame">

3. Trang doUpload.php sau khi upload xong sẽ trả lại HTML như sau

Code:

<script type="text/javascript">

function displayToMainFrame()
{
		
contentToReturn=document.getElementById('responseP').innerHTML;
top.frames["mainFrame"].getResponseText(contentToReturn,'maincontent');

}
			
</script>
<body onload="displayToMainFrame()">
<table>
  <tr>
     <td id="responseP">Upload thành công</td>
  </tr>
</table>
</body>

Khi có kết quả trả về từ server, hàm jvscript displayToMainFrame() sẽ được gọi.Hàm này sẽ lấy nội dung từ thẻ td có id là "responseP" (chuỗi "Upload thành công") trong trang doUpload.php để gán vào một thẻ <td> khác có id là "maincontent" ở trang upload.php nhờ vào hàm getResponseText.

4.Trang upload.php có định nghĩa hàm javascript getResponseText

Code:

function getResponseText(val,container)
{
        //cập nhật thông báo đến người dùng
	document.getElementById(container).innerHTML=val;
}

Quá trình upload xảy ra trong frame được ẩn đi vì thế người dùng sẽ không thấy và không làm refresh lại toàn bộ trang(Cũng là chủ ý của AJAX phải không)

Chúc bạn thành công.

kid08 viết 01:21 ngày 10/10/2018

yes, thks pro, sử dụng iframe ẩn để load, thế mờ ko nghĩ ra