使用Ajax异步上传图片的方法(html,javascript,php)

前两天项目中需要用到异步上传图片和显示上传进度的功能，于是找了很多外国的文章，翻山越岭地去遇上各种坑，这里写篇文章记录一下。

HTML

HTML代码没什么好说，一个form表单，还有文件类型的input。我们来看js部分。

javascript

    //绑定了`submit`事件。    
    $('#fileupload-form').on('submit',(function(e) {
        e.preventDefault();
        //序列化表单   
       var serializeData = $(this).serialize();

       // var formData = new FormData(this);
       $(this).ajaxSubmit({
            type:'POST',
            url: *yoururl*,
            dataType: 'json', 
            data: serializeData,            
            // data: formData,

            //attention!!!   
            contentType: false,      
            cache: false,             
            processData:false,      

            beforeSubmit: function() {
                    //上传图片之前的处理   
            },
            uploadProgress: function (event, position, total, percentComplete){ 
                //在这里控制进度条   
            },
            success:function(){

            },
            error:function(data){
                alert('上传图片出错');
            }
        });
    }));

    //绑定文件选择事件，一选择了图片，就让`form`提交。   

    $(#fileupload).on(change, function() {
        $(this).parent().submit();
    });

PHP

                    

                        
                        

                

                    

                         赞 (0)
                    
                    

                        
                        打赏
                         微信扫一扫  
                    
                


                

                
            
 
                
                

              

                

                

                    
相关文章:
                    


                            

                                 
                    
                    
                        

                            

                                

            
                
                                    

                                        

                                            
PHP语言结构语句
                                            

                                                

        PHP语言结构语句
1、PHP-顺序结构
顺序结构就像一条直线，按着顺序一直往下执行。我们编写的代码默认都是按照顺序结构执行的。
2、...
                                                
                                                
                                                    [阅读全文]
                                                
                                            
                                        
                                    
                                
                            
                            

                                

            
                
                                    

                                        

                                            
WPF实现画线动画效果实例
                                            

                                                

        本文实例为大家分享了WPF实现画线动画的具体代码，供大家参考，具体内容如下
需求：一条直线(不是曲线)，模范笔画一样在画布上逐渐画出来。但...
                                                
                                                
                                                    [阅读全文]
                                                
                                            
                                        
                                    
                                
                            
                            

                                

            
                
                                    

                                        

                                            
Asp.net mvc 4下的html编辑器－HTMLBox
                                            

                                                

        1、 准备工作
 解压后的文件如上：
2、 创建ASP.NET MVC 2.0 Razor项目，选择“空&rdqu...
                                                
                                                
                                                    [阅读全文]
                                                
                                            
                                        
                                    
                                
                            
                            

                                

            
                
                                    

                                        

                                            
mysql在JSP页面中分页查看的解决
                                            

                                                

        
	 

	最近一直在做期末的项目，所以遇见了很多问题，解决了，就会在这里写出来和大家分享。。。。

	 
...
                                                
                                                
                                                    [阅读全文]
                                                
                                            
                                        
                                    
                                
                            
                            

                                

            
                
                                    

                                        

                                            
Python：序列化二叉树
                                            

                                                

        Python：序列化二叉树。
题目描述
请实现两个函数，分别用来序列化和反序列化二叉树

class TreeNode:
    ...
                                                
                                                
                                                    [阅读全文]
                                                
                                            
                                        
                                    
                                
                            

                        
                        

                            

                                
                                
                        
                    



                
                

                    
                    
                    

                

                    
                    

                

                    

                        版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。
                        如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实将立刻删除。
                    
                

                

                    

                        
发表评论
                    

                    

                        



                                    

                                

                                    

                            

验证码：