使用codeigniter的Ajax文件上传 [英] Ajax File Upload using Codeigniter
问题描述
我想用codeigniter和Ajax上传图片。我已经有AJAX方法插入字段值到数据库，什么是上载我的文件最简单，最简单的方法。 下面是JQuery的自定义函数：
I'm trying to upload an image using codeigniter and ajax. I already have the ajax method to insert the field values to the DB, what's the easiest and simplest way to upload my file. Here's the JQuery custom function:
(function($){
jQuery.fn.ajaxSubmit =
function() {
$(this).submit(function(event) {
event.preventDefault();
var url = $(this).attr('action');
var data = $(this).serialize();
$.ajax({
url: url,
type: "POST",
data: data,
dataType: "html",
success: function(msg) {
$('#main').html(msg);
}
});
return this;
});
};
})(jQuery);
我把它称为是这样的：
I call it like this:
$(document).ready(function() {
$('#myForm').ajaxSubmit();
});
该功能工作正常，数据被插入到数据库中，我甚至有得到模型上传图片之前创造了一些目录，它们被创建，但图像没有上传的。
The function works fine, the data gets inserted in the database and I even have some directories that get created in the model before uploading the image, they are created but the image is not uploaded at all.
我知道我需要使用一个隐藏的iframe来完成这项工作，但我不完全知道如何整合，在我的code。
I know I need to use a hidden Iframe to do the job, but I dont quite know how to integrate that in my code.
推荐答案
我创建自定义的阿贾克斯文件上传使用codeIgniter，jQuery和Malsup形式的插件。下面是HTML和JavaScript / CSS code。它还支持多文件上传和进度。
I created custom Ajax File Uploader using CodeIgniter, jQuery and Malsup form plugin. Here is the HTML and Javascript/CSS code. It also support multiple file upload and Progress.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Ajax UP Bar</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('form').submit( function() {
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
$(this).ajaxForm({
beforeSend: function() {
status.html();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function(xhr) {
status.html(xhr.responseText);
}
});
});
});
</script>
</head>
<body>
<form method="post" action="<?php echo base_url('users/upload/'); ?>" enctype="multipart/form-data">
<label for="upload">Select : </label>
<input type="file" name="upload[]" id="upload" multiple="multiple" />
<input type="submit" name="fsubmit" id="fsubmit" value="Upload" />
</form>
<div class="progress">
<div class="bar"></div >
<div class="percent">0%</div >
</div>
<div id="status"></div>
</body>
</html>
<style>
body { padding: 30px }
form { display: block; margin: 20px auto; background: #eee; border-radius: 10px; padding: 15px }
.progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; }
.bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; }
.percent { position:absolute; display:inline-block; top:3px; left:48%; }
</style>
在codeIgniter控制器：
In CodeIgniter Controller :
<?php
if (!defined('BASEPATH'))
exit('No direct script access allowed');
class Users extends CI_Controller
{
public function __construct()
{
parent::__construct();
}
public function upload()
{
if (isset($_FILES['upload']['name'])) {
// total files //
$count = count($_FILES['upload']['name']);
// all uploads //
$uploads = $_FILES['upload'];
for ($i = 0; $i < $count; $i++) {
if ($uploads['error'][$i] == 0) {
move_uploaded_file($uploads['tmp_name'][$i], 'storage/' . $uploads['name'][$i]);
echo $uploads['name'][$i] . "\n";
}
}
}
}
}
希望这有助于你。谢谢！
Hope this helps you. Thanks!!
这篇关于使用codeigniter的Ajax文件上传的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
