我正在尝试使用jQuery和Ajax函数上传图像,以及如何获取图像文件的所有详细信息,例如我们使用的php $_FILE()
$_FILE()
这是我的代码
JS
$("#uploadimg" ).click(function() { $( "#file" ).click(); }); $( "#file" ).change(function(e) { var file=$('#file').val(); alert(file); die(); e.preventDefault(); $.ajax({ url:'http://localhost/JSG/blog/uploadimg', secureuri:false, type: "POST", fileElementId:'image', dataType: 'text', data:{ file: file }, cache: true, success: function (data){ alert(data); console.log(data); }, }); });
控制者
public function uploadimg() { $var = $_POST['file']; print_r($var); if($this->input->post('file')) { $config['upload_path'] = 'upload'; $config['file_name'] = $var; $config['overwrite'] = 'TRUE'; $config["allowed_types"] = 'jpg|jpeg|png|gif'; $config["max_size"] = '1024'; $config["max_width"] = '400'; $config["max_height"] = '400'; $this->load->library('upload', $config); if(!$this->upload->do_upload()) { $this->data['error'] = $this->upload->display_errors(); print_r( $this->data['error']); } else { print_r("success"); } } }
视图
<form role="form"> <div class="form-group"> <label for="recipient-name" class="control-label">Blog Title:</label> <input type="text" class="form-control" id="recipient-name"> </div> <div class="form-group"> <label for="message-text" class="control-label">Message:</label> <textarea class="form-control" id="message-text"></textarea> </div> <div class="form-group"> <label for="message-text" class="control-label">Upload image:</label> <img src="<?php echo base_url();?>assest/img/blank.png" alt="Blank image" id="uploadimg" class="img-thumbnail"> <input style="display:none" id="file" value=" " type="file" class="file" data-show-preview="false"> </div> </form>
响应
C:\ fakepath \ Koala.jpg您没有选择要上传的文件。
请帮忙
您可以在html5中使用FormData API。
您的表格必须是:
<form enctype="multipart/form-data" accept-charset="utf-8" name="formname" id="formname" method="post" action="">
然后jQuery:
function uploadImage() { if (typeof FormData !== 'undefined') { // send the formData var formData = new FormData( $("#formID")[0] ); $.ajax({ url : baseUrl + 'uploadImage', // Controller URL type : 'POST', data : formData, async : false, cache : false, contentType : false, processData : false, success : function(data) { successFunction(data); } }); } else { message("Your Browser Don't support FormData API! Use IE 10 or Above!"); } }
然后,在控制器中,您将获得$_FILES数组中的文件。
$_FILES