![](/img/trans.png)
[英]How to upload image using ajax and codeigniter without resetting the form?
[英]How to upload image from a dynamically Generated Form in CodeIgniter using ajax
我想使用jquery ajax將圖像上傳到本地文件夾。 復雜的部分是我具有動態生成的表單,我為這些表單和字段賦予了ID,以顯示提交的表單,如下所示。 我正在使用以下代碼,但未上傳圖片。
查看:Upload_View.php
<script type="text/javascript">
function sendVideoData(frm_id)
{
var data = new FormData(document.getElementById("post_video_"+frm_id));
// make the AJAX request
jQuery.ajax({
type: "POST",
url: "<?php echo base_url(); ?>"+"dashboard/do_upload",
data: data+'&form_id='+frm_id,
mimeType:"multipart/form-data",
contentType: false,
cache: false,
processData:false,
dataType: 'json',
success: function (data) {
alert("data"+data);
},
});
return false;
}
</script>
<form name="post_video" id="post_video_<?=$row1['id']?>" method="post" onsubmit="return sendVideoData(<?=$row1['id']?>)">
<input type="file" name="save_movie_<?=$row1['id']?>" id="movie_<?=$row1['id']?>" />
<input name="type_lecture_id" class="get_lecture_id" id="get_lecture_id_<?=$row1['id']?>" value="<?=$row1['id']?>" type="hidden"/>
<input type="button" class="postbtn" id="submit_movie_<?=$row1['id']?>" value="Upload Video File"/>
</form>
控制器:
$formid=$_POST['form_id'];
$filename='save_movie_'.$formid;
$path_parts = pathinfo($_FILES[$filename]["name"]);
$extension = $path_parts['extension'];
$Random_file_name=$filename.".".$extension;
move_uploaded_file($_FILES[$filename]['tmp_name'], "http://localhost/dummy/uploads/".$Random_file_name);
save_movie_這是文件控件的ID,$ formid顯示我們必須從哪個表單和哪個字段獲取數據,但是由於我是Codeigniter的新手,所以我不知道如何上傳它。 我還想顯示進度欄,以顯示圖像上傳的進度。請回復。 謝謝...
您必須通過以下方式修改jQuery ajax函數
var data = new FormData(document.getElementById("post_video_"+frm_id)[0]);
jQuery("#progressbar").show(); // add your prgress bar here like this
jQuery.ajax({
type: "POST",
url: "<?php echo base_url(); ?>"+"dashboard/do_upload",
data: data+'&form_id='+frm_id,
mimeType:"multipart/form-data",
contentType: false,
async: false,
cache: false,
processData:false,
dataType: 'json',
success: function (data) {
alert("data"+data);
jQuery("#progressbar").hide(); //hide your loader like this
},
});
return false;
謝謝。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.