首页 > 开发 > JS > 正文

jquery ajax不能上传图片

2017-09-05 13:02:18  来源:网友分享

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到后端,图片上传不了,改怎么解决呢????

解决方案

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的
希望对你有用,以前学习的时候用到这个,给你翻出来了