Javascript 上载文件而不重定向或刷新

如何在不刷新或重定向到新页面的情况下将图像上载到文件夹？我正在考虑使用php5，我想做的是一个页面，用户可以上传自己的照片，而无需刷新页面或重定向。我将拥有用户以前上传的所有图像，在同一页面中，用户可以从自己的任何图像中进行选择，并将其插入可拖动设备中

var z=1//使div可重叠的值
$（“#添加文本”）。单击（函数（e）{
/**使div可拖动**/
$('', {
类：“ui小部件内容”，
附录：'.container'，
可拖动：{
包含：'父'，
开始：功能（事件、用户界面）{
$（this.css（'z-index'，++z）；
}
}
});
});
$（document）.on（“dblclick”，'.text'，function（）{
$（this.hide（）；
$（this）.closest（'.item'）.find（'.edit_text'）.val（$（this.text（））.show（）；
});
$（文档）。在（“单击“，”。编辑文本”，函数（）上{
返回false；
});
$（文档）。在（“单击”，函数（）上）{
var editingText=$（'.edit_text:visible'）；
如果（编辑文本长度）{
editingText.hide（）；
editingText.closest（'.item'）.find（'.text'）.text（$（editingText.val（））.show（）；
}
});
var计数=1；
var选择的随机变量；
ko.bindingHandlers.draggable={
init：函数（元素、valueAccessor、allBindingsAccessor、viewModel）{
$（元素）.draggable（）；
$（元素）.addClass（'item'+计数）；
计数++；
$（元素）。在（'单击'，函数（）上）{
selectedDraggable=$（此项）；
})
}
};
var vm=函数（）{
var self=这个；
self.items=ko.observearray（）；
self.textContent=ko.可观察（“”）；
self.init=函数（）{
自身项目（[]）；
}
self.remove=功能（项目）{
控制台日志（项目）；
self.items.remove（项目）；
}
self.addNew=函数（）{
self.items.push（self.textContent（））；
self.textContent（“”）；
}
self.init（）；
}
应用绑定（新vm（））
a:link{
文字装饰：无；
}
/*未访问链接*/
a:参观了{
文字装饰：无；
}
/*访问链接*/
a:悬停{
文字装饰：无；
}
/*鼠标悬停链接*/
a:主动的{
文字装饰：无；
}
/*选定链接*/
.工具栏{
背景颜色：浅灰色；
宽度：490px；
高度：23px；
边界：无；
职位：无；
}
.项目{
宽度：200px；
高度：200px；
填充：0.5em；
背景：透明；
z指数：1；
显示：块；
}
.编辑文本{
显示：无；
}
.fix_backround{
背景色：透明；
}
.集装箱{
背景颜色：浅灰色；
宽度：500px；
高度：500px；
边框：2倍实心；
位置：相对位置；
溢出：自动；
}



创造



[x]





函数预览文件（vid，iid）{
var preview=document.querySelector（'img'）；
var preview=document.querySelector（vid）；
var file=document.querySelector（iid）.files[0]；
var reader=new FileReader（）；
reader.onloadend=函数（）{
preview.src=reader.result；
}
如果（文件）{
reader.readAsDataURL（文件）；
$（vid.show（）；
/***在这里编写图像上传代码***/
}否则{
preview.src=“”；
}
}

在网上搜索
ajax上传
。许多现有的脚本可以简化流程，或者简化关于如何自己完成的信息。摆脱表单，通过AJAX进行上传。如果要保留表单，请点击表单的
submit
事件并调用
event.preventDefault（）
。