Ajax无刷上传文件

最新推荐文章于 2015-05-15 15:59:19 发布

原创最新推荐文章于 2015-05-15 15:59:19 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #function #extension #button #file #upload

利用jQuery的ajax上传参数如下：

   $.ajax({
    url:"<%=request.getContextPath()%>/admin/image/upload.do" ,
    type:"post",
    //contentType:"multipart/form-data",
    dataType:"html",
    data:"imageKbn="+"imageUpload2",
    success:function(obj){
     $("#right").html(obj) ;
    }
   }) ;

————————

但是xmlHttpRequest无法上传流文件

所以，使用ajaxFileUpload的js插件来做（其实也就是动态生成iframe然后以form提交而已）

ajaxfileupload.js

jQuery.js

——————

$.ajaxFileUpload ( { url:'<%=request.getContextPath()%>/admin/image/upload.do', secureuri:false, fileElementId:'image', dataType: 'html', success: function(data, status) { alert("success"); $("#right").html(data); }, error: function (data, status, e) { alert("error"); } } )

HTML：

<div id="right"> <p class="arrow">画像アップロード(未登録モード)</p> <hr /> <div id="imageUpload" class="imageUpload"> <p class="imageUpload" align="center"> <span class="border_03"> <input type="file" name="image" id="image"/> </span><br /><br />  <input type="button" value="画像読込" id="button2" name="button2" onclick="imageUpload();"/> </p> </div> </div>  <div id="right"> <p class="arrow">画像アップロード(表示モード)</p> <hr /> <div id="imageShow" class="imageUpload"> <p class="imageUpload" align="center"><img width="100%" src="<s:property value='imagePath' />" /> <br /> <br /> <input type="button" value="画像編集" name="button3" /> <input type="button" value="削除" name="button4" /> <br /> <br /> 表示順 <input type="text" name="sort" /></p> </div> </div>

java就不写了，利用struts2的框架

设定File属性【image】

可以取得。

注意：

这里的ajaxfileupload.js有问题，在其196行（未见到有解决方法）

jQuery("<div>").html(data).evalScripts();

将导致ajax永远返回error结果。

这时替换页面时，使替换的页面的JS生效的设定

对于我来说，无用，所以，修改为

jQuery("<div>").html(data)；

————————

下面是自己今天实验的3种上传框架：

//jquery.form.js function imageUpload4(){ alert("start"); $('#imageUploadForm').submit(function() { var options ={ target:'#right', url:'<%=request.getContextPath()%>/admin/image/upload.do', type:'POST', dataType: 'xml', success: function() {alert('success!!form');$("#right").html(response) ; } }; $(imageUploadForm).ajaxSubmit(options); return false; }); alert("end"); } // function imageUpload3(){ alert("access 3"); new Ajax_upload('#image', { // Location of the server-side upload script action: '<%=request.getContextPath()%>/admin/image/upload.do', // File upload name name: 'image', // Additional data to send data: { imageKbn : 1000 }, // Fired when user selects file // You can return false to cancel upload // @param file basename of uploaded file // @param extension of that file onSubmit: function(file, extension) { if (! (ext && /^(jpg|png|jpeg|gif)$/.test(ext))){ // extension is not allowed alert('Error: invalid file extension'); // cancel upload return false; } }, // Fired when file upload is completed // @param file basename of uploaded file // @param response server response onComplete: function(file, response) { $("#right").html(response) ; } }); } function imageUpload2(){ alert("imageUpload2"); $.ajax({ url:"<%=request.getContextPath()%>/admin/image/upload.do" , type:"post", //contentType:"multipart/form-data", dataType:"html", data:"imageKbn="+"imageUpload2", success:function(obj){ $("#right").html(obj) ; } }) ; }