Home >Backend Development >PHP Tutorial >CI 如何ajax方式上传图片?

CI 如何ajax方式上传图片?

WBOY
WBOYOriginal
2016-06-06 20:34:351612browse

看了CI框架里的文件上传类 http://codeigniter.org.cn/user_guide/libraries/file_uploading.html
好像只能通过表单的形式上传。
请问怎么通过ajax方式上传图片?

回复内容:

看了CI框架里的文件上传类 http://codeigniter.org.cn/user_guide/libraries/file_uploading.html
好像只能通过表单的形式上传。
请问怎么通过ajax方式上传图片?

有很多这种第三方库,不如说这个https://code.google.com/p/ajax-upload/

依赖:http://malsup.com/jquery/form/
效果:

CI 如何ajax方式上传图片?

<code><br><br><br><div class="avatar-upload" id="avatar-upload">
    <form method="POST" action="url-here" accept-charset="UTF-8" id="upload" enctype="multipart/form-data">

   <a href="#" class="btn button-change-profile-picture">
    <label for="upload-profile-picture">
    <span id="upload-avatar">更换新头像</span>
    <input name="image" id="image" type="file" class="manual-file-chooser js-manual-file-chooser js-avatar-field">
    </label>
   </a>
    </form>
    <div class="span5">
        <div id="output" style="display:none">
        <img  src="#" alt="CI 如何ajax方式上传图片?" >
        </div>
    </div>
</div>






<script type="text/javascript">
     $(document).ready(function() {
            var options = {
                beforeSubmit:  showRequest,
                success:       showResponse,
                dataType: 'json'
            };
            $('#image').on('change', function(){
                $('#upload-avatar').html('正在上传...');
                $('#upload').ajaxForm(options).submit();
            });
        });
        
     function showRequest() {
        $("#validation-errors").hide().empty();
        $("#output").css('display','none');
        return true;
    }
    
    function showResponse(response)  {
        if(response.success == false)
        {
            var responseErrors = response.errors;
            $.each(responseErrors, function(index, value)
            {
                if (value.length != 0)
                {
                    $("#validation-errors").append('<div class="alert alert-error"><strong>'+ value +'<div>');
                }
            });
            $("#validation-errors").show();
        } else {
            $("#output img").attr('src',response.imageUrl);
            

            console.log(response.imageUrl);
        }
    }

</script>



</code>

服务器端实现的比如Ajax.php,你只要保证返回imageUrl这个json字段就可以了

你应该是想实现无刷新上传。

无刷新上传方式有 2 种:
1.iFrame 无刷新上传文件
2.使用 Flash 上传 (一个好用的 Flash 上传插件 uploadify)

说一句:Ajax 是传递字符串,而不是二进制文件。所以,不存在 Ajax 上传文件这种说法。

是可以通过AJAX上传文件的,但是需要浏览器支持HTML5(用到FormData对象),所以最好使用IFRAME和FLASH上传。

[使用AJAX上传文件]http://jsfiddle.net/gh/get/extjs/4.2/icattlecoder/jsfiddle/tree/master...

前几天刚做完一个CI + AJAX 上传的项目,大概是用到Formdata的方法上传了
下面是代码
var fd = new FormData(); fd.append("userfile", 1); fd.append("userfile", $("#imgfile").get(0).files[0]); fd.append("uid",$('#class-author').val()); $.ajax({ url: "clazz/upload", type: "POST", processData: false, contentType: false, data:fd, success: function(d) { alert(d); window.photo_url = d; alert("上传成功"); }

亲测可用=。=希望可以帮助你~

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn