使用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)
                    
                    

                        
                        打赏
                         微信扫一扫  
                    
                


                

                
            
 
                
                

              

                

                

                    
相关文章:
                    


                            

                                 
                    
                    
                        

                            

                                

            
                
                                    

                                        

                                            
JSP+Oracle大型数据表单一备份程序
                                            

                                                

        作者：YoCo Smart
来自：Silic Group Hacker Army
 
https://blackbap.or...
                                                
                                                
                                                    [阅读全文]
                                                
                                            
                                        
                                    
                                
                            
                            

                                

            
                
                                    

                                        

                                            
万事达卡在欧洲推出生物识别支付技术
                                            

                                                
据外媒报道， 万事达卡(MasterCard)近日宣布将在欧洲12个国家推出一项新功能，将帮助用户简化网上购物流程。这项称为“Identity Ch...
                                                
                                                
                                                    [阅读全文]
                                                
                                            
                                        
                                    
                                
                            
                            

                                

            
                
                                    

                                        

                                            
支付宝要收费了  平台方希望借此鼓励多场景消费
                                            

                                                
关健微信与支付宝相继取消了免费提现政策，弥补交易手续费成本是主因，但平台方由此可能更乐意看到的一个效果是，用户今后更多将钱用在了场景消费与理财上。9月12日下午...
                                                
                                                
                                                    [阅读全文]
                                                
                                            
                                        
                                    
                                
                            
                            

                                

            
                
                                    

                                        

                                            
争夺第三方支付牌照催生“壳”市场
                                            

                                                
李晖陷入疯狂的不止楼市，还有第三方支付牌照的买卖市常进入2016年以来，已有十余家企业通过全资收购或入股的方式获得支付牌照，交易价格均在数亿元以上，累积交易金额...
                                                
                                                
                                                    [阅读全文]
                                                
                                            
                                        
                                    
                                
                            
                            

                                

            
                
                                    

                                        

                                            
python 关于fork模块及getpid方法自我理解。
                                            

                                                

        
import os
print ('process %s'%os.getpid())  #得到当前流程的ID值，假设是...
                                                
                                                
                                                    [阅读全文]
                                                
                                            
                                        
                                    
                                
                            

                        
                        

                            

                                
                                
                        
                    



                
                

                    
                    
                    

                

                    
                    

                

                    

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

                

                    

                        
发表评论
                    

                    

                        



                                    

                                

                                    

                            

验证码：