>  Q&A  >  본문

javascript - jquery ajax不能上传图片

form里既有数据也有图片上传
js代码:

 <script type="text/javascript">

     	$(document).ready(function(){       //DOM的onload事件处理函数  
   	 $("#send").click(function(){   //当按钮button被点击时的处理函数  
      postdata();                   //button被点击时执行postdata函数  
                    
    	});  
 	});  
	 function postdata(){            //提交数据函数  
   	 $.ajax({                     //调用jquery的ajax方法  
      	type: "post",              //设置ajax方法提交数据的形式  
      	url: "sendmes.php",             //把数据提交到sendmes.php  

      	dataType: "json",//返回数据类型
      	data: $("#send_form").serialize(),  
      	
    	});  
 		} 
 	
     </script>

html form:

<form id="send_form" enctype="multipart/form-data">
						
		<textarea name="message" id="msg"></textarea>
						
		<input type="file" name="upload" id="upload">
						
		<input type="submit" class="send" id="send" value="发布">
						
</form>

现在就只能把textarea里的信息post到后端,图片上传不了,改怎么解决呢????

天蓬老师天蓬老师2748일 전670

모든 응답(6)나는 대답할 것이다

  • PHP中文网

    PHP中文网2017-04-10 12:45:40

    ajaxfileupload.js
    google 下这个,
    ajax异步无刷新上传插件, google, 有很多例子

    ,只能支持一个文件上传, 如果要加其他的

    比如 upload.php?text=你要加的文本。

    		<script type="text/javascript">
       			function inputFileChange(){
       				$.ajaxFileUpload({
    	                url:'<%=basePath %>file/uploadtempimage.action',//用于文件上传的服务器端请求地址
    	                secureuri:false,//一般设置为false
    	                fileElementId:'photofile',//文件上传空间的id属性  <input type="file" id="file" name="file" />
    	                dataType: 'json',//返回值类型 一般设置为json
    	                success: function (data,status)  //服务器成功响应处理函数
    	                {	
    	                    $("#testImg").attr("src",data.src);  //后台返回的JSON格式字符串,src 是上次图片的服务器地址
    	                },
                        error: function (data, status, e) {  
      					      alert(e);  
    			  		}
    			  	})
    			  	$("#photofile").replaceWith('<input type="file" name="file" onchange="inputFileChange()" id="photofile" value="" />');  // 更换input 标签, 如果用Button提交可以不要,如果 是 onchange="inputFileChange()" 就一定要替换
       			}
    	   		</script>

    我的事jsp的
    希望对你有用,以前学习的时候用到这个,给你翻出来了

    회신하다
    0
  • 大家讲道理

    大家讲道理2017-04-10 12:45:40

    不如你看看 $('#send_form').serialize() 能得到啥?

    除非使用HTML5的File API,否则ajax没法直接POST文件的。

    회신하다
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-10 12:45:40

    想要异步上传文件和图片可以是用iframe标签,然后将form 的target指定为你添加的iframe即可。具体代码就不贴了,你可以搜搜 “iframe 文件上传” 。或者找一些第三方库

    회신하다
    0
  • 天蓬老师

    天蓬老师2017-04-10 12:45:40

    建议用其他的上传库...比如plupload

    这样上传用plupload , 其他的还是等上传后用AJAX提交...

    회신하다
    0
  • PHP中文网

    PHP中文网2017-04-10 12:45:40

    老版本的XMLHttpRequest对象没有实现

    详细说明:
    http://www.ruanyifeng.com/blog/2012/0...

    회신하다
    0
  • PHPz

    PHPz2017-04-10 12:45:40

    试过很多后,发现plupload还是很好用的,推荐。可以支持html5,flash,普通上传、进度条、回调等等。

    회신하다
    0
  • 취소회신하다