oceania
oceania
  • 发布:2015-04-21 20:48
  • 更新:2018-08-27 11:37
  • 阅读:3108

怎么用plus.net.XMLHttpRequest()post提交带有图片的表单并接受服务器返回的数据

分类:HTML5+
2015-04-21 20:48 负责人:无 分享
已邀请:
DCloud_UNI_FXY

DCloud_UNI_FXY

mui.ajax支持文件上传和普通参数混合提交。参考以下代码

var fd = new FormData();  
                fd.append("username", "mui");//普通参数  
                fd.append('file', file.files[0]);//文件  
//目前需要使用标准xhr。plus的xhr暂不支持  
mui.ajaxSettings.xhr = function(protocol) {  
                    return new window.XMLHttpRequest();  
                };  
                mui.ajax({  
                    url: 'script.php',  
                    data: fd,  
                    processData: false,  
                    contentType: false,  
                    type: 'POST',  
                    success: function(data) {  
                        alert(data);  
                    }  
                });
  • oceania (作者)

    请问file.files[0]的file是指什么?

    2015-04-22 23:26

huiyichengyi

huiyichengyi

做两个异步请求,一个上传文件一个提交表单内容,上传文件可以通过将图片转为base64编码实现

DCloud_UNI_FXY

DCloud_UNI_FXY

完整的测试代码

<div class="mui-content mui-fullscreen">  
            <input type="file" name="file" id="file" style="margin: 50px 0;"/>  
            <button id="upload" class="mui-btn mui-btn-block mui-btn-primary">上传</button>  
        </div>  
        <script type="text/javascript" src="js/mui.min.js"></script>  

        <script type="text/javascript" charset="utf-8">  
            mui.init();  
            var fileEl = document.getElementById("file");  
            document.getElementById("upload").addEventListener('tap', function() {  
                //标准xhr可以正常提交文件,plus的xhr提交的文件为空  
                mui.ajaxSettings.xhr = function(protocol) {  
                    return new window.XMLHttpRequest();  
                };  
                var fd = new FormData();  
                fd.append("username", "mui");  
                fd.append('userfile', file.files[0]);  
                mui.ajax({  
                    url: 'http://192.168.1.117/loccitane/admin/index.php/api/post',  
                    data: fd,  
                    processData: false,  
                    contentType: false,  
                    type: 'POST',  
                    success: function(data) {  
                        alert(data);  
                    }  
                });  
            });  
        </script>
美好时光

美好时光

   您好。很不错的文件上传程序。  

   但好像程序不对。fd.append('userfile', file.files[0]);应该为fd.append('userfile', fileE1.files[0]);吧?否则file这个变量时从哪里来的呢?  
   请您确认一下,谢谢!  

该问题目前已经被锁定, 无法添加新回复