jQuery 플러그인을 사용하여 새로 고침 없이 파일 업로드를 위한 코드 공유 구현

프로젝트에서 새로고침 없이 이미지를 업로드할 때 AJAX를 자주 사용하는데, iframe 업로드와 플래시 플러그인이 상대적으로 복잡해서 jquery 플러그인을 찾았습니다. 다음은 jQuery ajaxupload 플러그인을 사용하여 파일을 새로 고치지 않고 업로드하는 기능을 구현하는 방법을 소개하는 예제 코드입니다. 필요한 친구가 참고할 수 있습니다.

AJAX가 새로 고치지 않고 이미지를 업로드하는 경우가 많습니다. 프로젝트에서 사용하는데 iframe 업로드와 플래시 플러그인 둘 다 꽤 복잡해서 jquery 플러그인을 찾았습니다.

코드는 다음과 같습니다

사용방법은 다음과 같습니다

<script type="text/javascript">
$(function () {
var button = $(&#39;#upload&#39;);
new AjaxUpload(button, {
action: &#39;/upload/imagesAjaxUpload&#39;,
name: &#39;upload&#39;,
onSubmit: function (file, ext) {
if (!(ext && /^(jpg|jpeg|JPG|JPEG)$/.test(ext))) {
alert(&#39;图片格式不正确,请选择 jpg 格式的文件!&#39;, &#39;系统提示&#39;);
return false;
}
// change button text, when user selects file
button.text(&#39;上传中&#39;);
// If you want to allow uploading only 1 file at time,
// you can disable upload button
this.disable();
// Uploding -> Uploading. -> Uploading...
interval = window.setInterval(function () {
var text = button.text();
if (text.length < 10) {
button.text(text + &#39;...&#39;);
} else {
button.text(&#39;上传中&#39;);
}
}, 200);
},
onComplete: function (file, response) {
window.clearInterval(interval);
// enable upload button
this.enable();
var json = eval(&#39;(&#39; + response + &#39;)&#39;);
button.text(&#39;选择文件&#39;);
$(".qr").css("display","inline");
$(".qr>img").attr("src",json.file_name);
$("input[name=&#39;wechat_qr&#39;]").val(&#39;/uploads/qr/&#39;+json.file_name);
//alert(json.file_name);
//$("#ajaximg").html("<img src=&#39;/uploads/qr/"+json.file_name+"&#39; />");
//$("#wechat_qr").val(&#39;/uploads/qr/&#39;+json.file_name);
}
});
});
</script>

위 내용은 jQuery 플러그인을 사용하여 새로 고침 없이 파일 업로드를 위한 코드 공유 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!