我已经在线阅读了一篇非常有用的教程,以HTML形式通过AJAX上传文件。 下面是我的HTML代码,然后是jQuery代码。
HTML
<input type="file" id="myFile" name="myFile" />
<input type="button" id="upload" value="upload" />
<br />
<progress id="prog" value="0" min="0" max="100"></progress>
的jQuery
$("#upload").on("click",function() {
$("#myFile").upload("xhr2.php", function(success) {
},$("#prog"));
});
如何在PHP中访问上传的文件以处理数据并将任何错误输出到页面?
修改
// data is optional
$.fn.upload = function(remote,data,successFn,progressFn) {
// if we dont have post data, move it along
if(typeof data != "object") {
progressFn = successFn;
successFn = data;
}
return this.each(function() {
if($(this)[0].files[0]) {
var formData = new FormData();
formData.append($(this).attr("name"), $(this)[0].files[0]);
// if we have post data too
if(typeof data == "object") {
for(var i in data) {
formData.append(i,data[i]);
}
}
// do the ajax request
$.ajax({
url: remote,
type: 'POST',
xhr: function() {
myXhr = $.ajaxSettings.xhr();
if(myXhr.upload && progressFn){
myXhr.upload.addEventListener('progress',function(prog) {
var value = ~~((prog.loaded / prog.total) * 100);
// if we passed a progress function
if(progressFn && typeof progressFn == "function") {
progressFn(prog,value);
// if we passed a progress element
} else if (progressFn) {
$(progressFn).val(value);
}
}, false);
}
return myXhr;
},
data: formData,
dataType: "json",
cache: false,
contentType: false,
processData: false,
complete : function(res) {
var json;
try {
json = JSON.parse(res.responseText);
} catch(e) {
json = res.responseText;
}
if(successFn) successFn(json);
}
});
}
});
};
答案 0 :(得分:0)
这将是一项艰巨的工作,因为您的表单上传和文件上传发生在不同的请求中。据说,您可以引用文件的唯一方法是将上传到表单数据之前。有不同的方法可以引用你的文件,通过一个会话,将它作为一个额外的queryString参数传递给你的表单,使用数据库(这将是沉闷的),它真的取决于你。主要问题是它们处于单独的请求中,您需要在它们之间建立连接。祝你好运!