phpiframe上傳
⑴ 怎麼在form里分別上傳多個文件,如圖
可以用iframe上傳,orm表單的method、 enctype屬性必須和下面代碼一樣。然後將target的值設為iframe的name,這樣就可以實現無刷新上傳文件。
<form action="uploadfile.php" enctype="multipart/form-data" method="post" target="iframeUpload">
<iframe name="iframeUpload" src="" width="350" height="35" frameborder=0 SCROLLING="no" style="display:NONE"></iframe>
<input id="test_file" name="test_file" type="file">
<input value="上傳文件" type="submit">
</form>
⑵ php上傳功能怎麼實現點擊瀏覽在打開文件之後直接上傳
我的博客《用最簡單的例子實現jQuery圖片即時上傳》已經做了詳細的介紹,請參考實現。
主要原理:
jQuery上傳插件將<inputtype="file">的數據轉至一個新生的form當中將其提交,
而表單的target指向新生的iframe,在iframe中做表單提交後的處理,
完成後iframe會重新載入並包含處理結果,通過iframe的load事件便可捕捉並獲取處理結果,
回傳至原表單所在的頁面(feedback)中,實現jQuery即時上傳的效果。
而在表單提交的時候,為了實現選擇文件後即時提交表單,則使用了input標簽的change事件,
只要選擇了文件,input的值就會發生變化,此時就可以提交表單進行處理了。
⑶ php提交表單問題,現在表單裡面引入了iframe,可裡面的input裡面的值不能提交過去
用iframe 裡面載入的圖片???
post不出去的 不用想了。
提示 不要用iframe容器,因為父級框架中 無法 提交子框架的 表單。 僅僅用原生的提交表單按鈕 是絕對不可能的操作。
如果可以 改用div容器。顯示預覽,然後 提交原父級表單中的<input type="file"> 可以post傳遞文件。 iframe下的表單 僅僅用原生的 提交表單按鈕 你post不出去
如果又能力自己重寫提交動作,重組post數據(jq很簡單實現這個)。也可以提交iframe下的子表單的input數據。
以下是我用的 簡單的帶圖片預覽上傳的 部分代碼
引用以下庫
ajaxfileupload.js
jquery-migrate-1.2.1.min.js
jquery-1.11.0.min.js
$('input#but_upload').click(function(){
//picdata=$('input#picfile').val;
tc=$('div#tags').children('span.selecttag').eq(0).attr('mete_id');
tout=$('div#infos').children('div#sel_mod').find('li.selected').last().attr('mete_hash_name');
if(typeof(tc)=='undefined'){
$('p#outerdebug').text('請選擇一個標簽');
returnfalse;
}
if(typeof(tout)=='undefined'){
$('p#outerdebug').text('請選擇上傳圖片所在的模板框架');
returnfalse;
}
if($("#picfile").val().length<=0){
$('p#outerdebug').text('請選擇一個要上傳的本地文件');
returnfalse;
}
$.ajaxFileUpload({
url:"postpic.php?token="+token+"&tags="+tc+"&hash_name="+tout,
secureuri:false,
type:'post',
fileElementId:'picfile',
dataType:'json',
success:function(data,status){
if(data.success==true){
tempstr="<divclass="pics"mete_hash=""+data.hash_name+""><divclass="prepic"><imgsrc=""+data.url+""></div><divclass="act"><divclass="removethis"onclick="removethis(this)"></div><divclass="reflink"onclick="reflink(this)"></div></div></div>";
$("div#previews").prepend(tempstr);
}else{
$('p#outerdebug').text(data.error);
}
},
error:function(data,status,e)//伺服器響應失敗處理函數
{
$('p#outerdebug').text('BR_0'+e);
}
});
})
HTML
<form><inputid="picfile"name="picfile"type="file"size="2000000"/><br/><inputid="but_upload"type="button"value="上傳"/><hr/></form><pid="outerdebug"></p><divid="previews"><hrstyle="clear:both;visibility:hidden;"/>
順帶一提的是,這個實現非同步提交上傳文件的js庫,實際上就是利用了iframe,在iframe子框架內提前實現了一次post。
另外,從用戶端執行效果出發。不建議用iframe。 iframe載入是使用的主線程句柄。如果iframe頁面響應時間過長。會導致全部頁面,包括父級頁面鎖死。用戶體驗較差。 能用ajax非同步,盡量用。 我還沒遇到過ajax載入 輸入到div容器,用戶體驗感反而比iframe差的情況。
⑷ 請問如何用php實現實現頁面無刷新上傳圖片
1,頁面需要嵌入iframe
src是你另一個php程序,比如upload.php
2.form
提交的時候提交到iframe
3.upload.php判斷提交成功輸出一段js代碼,parent.document.getElemetById("PID").src="成功後的圖片地址";
⑸ iframe成功非同步上傳後,怎麼調用前端的回調函數
Form:
<form action="#" method="post" enctype="multipart/form-data" onsubmit="return chekcForm(this)">
Struts :
response.setContentType("text/html;charset=utf-8");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
out.print("JSON字串"); // {"statusCode":200; "message":"成功"; "loadUrl":"http://"}
out.flush();
out.close();
JQ:
var frame = {
ajaxDone:function(json){
if (json.statusCode == 200){
$('#messageDiv').html(json.message).show();
$.jquery.load(json.loadUrl);
} else {
}
},
frameDone:function(config){
var ifr = null,
fm = null,
defConfig = {
formObj: $('#form'),
complete: function(response) {},
};
config = $.extend(defConfig, config);
var $form = config.formObj;
var frameName = 'callbackframe';
ifr = $('<iframe name="'+ frameName +'" id="'+ frameName +'" style="display:none;"></iframe>');
ifr.appendTo($('body'));
$form.attr("target",frameName);
ifr.load(function(){
var response = this.contentWindow.document.body.innerHTML;
config.complete.call(this, response);
ifr.remove();
ifr = null;
});
return false;
}
}
function checkForm(form){
frame.frameDone({
formObj: $form,
complete: function(response){
var j = $.parseJSON(response);
frame.ajaxDone(j);
}
});
return true;
}