ajax jq 图片上传请求头_Jquery ajaxsubmit上传图片实现代码

这是数月前的事情了，场景是这样的：在进行图片上传的时，我发现开发人员使用的上传图片方式是Iframe + 传统的 http post 来处理的。

而且未建立统一上传函数。于是将代码改造了。心想来个ajax异步上传图片吧，这技术应该很老套了。于是直接打开强大的cnblogs轻松的找到了这篇文章直接依葫芦画瓢，将该作者的劳动成果直接“拿来主义了”。很快就把代码全改造了。可是当我把程序发布到服务器上的时问题来了。上传文件失效了！汗～都是偷懒造成的恶果。继续打开先前参考的那篇文章。原来作者解释了只能在本地使用而不能发布到服务器上。心想我难道还得用 iframe + http post 这个郁闷的方式么？？

于是不甘心的我打开了更加强大的google，开始全球搜索寻求解决方案，终于功夫不负有心人。找到了 "jquery.form.js" 。

异步上传图片的步骤如下：

1.引用 jquery js 框架(这东西的好处无需多论)后再引用 “jquery.form.js”。

2.建立一般处理程序 ashx。

核心代码如下：

html:

$(function () {

//上传图片

$("#btnUpload").click(function () {

if ($("#flUpload").val() == "") {

alert("请选择一个图片文件，再点击上传。");

return;

}

$('#UpLoadForm').ajaxSubmit({

success: function (html, status) {

var result = html.replace("

", "");

result = result.replace("

", "");

$("#image").attr('src', result);

alert(result);

}

});

ashx 如下：

namespace TestMvc.Utility

{

///

/// Summary description for PicUploadHander

///

public class PicUploadHander : IHttpHandler

{

public void ProcessRequest(HttpContext context)

{

context.Response.ContentType = "text/plain";

//验证上传的权限TODO

string _fileNamePath = "";

try

{

_fileNamePath = context.Request.Files[0].FileName;

//开始上传

string _savedFileResult = UpLoadImage(_fileNamePath, context);

context.Response.Write(_savedFileResult);

}

catch

{

context.Response.Write("上传提交出错");

}

注：整个上传使用ajax 异步数据，同时jquery回调出上传成功后图片在服务器上的相对路径。总的来说此方式相对传统的上传图片方式要强一些。

本例代码在此下载，FireFox 下测试通过。http://xiazai.jb51.net/201011/yuanma/AjaxUploadPic.rar

ajax jq 图片上传请求头_Jquery ajaxsubmit上传图片实现代码相关推荐

ajax jq 图片上传请求头_全面分析前端的网络请求方式:Ajax ,jQuery ,axios,fetch
链接:https://juejin.im/post/5c9ac607f265da6103588b31 一.前端进行网络请求的关注点大多数情况下,在前端发起一个网络请求我们只需关注下面几点: 传入基本 ...
ajax jq 图片上传请求头_如何使用js或jQuery向Ajax请求添加自定义HTTP头？
下面是一个使用XHR 2的示例:function xhrToSend(){ // Attempt to creat the XHR2 object var xhr; try{ xhr = new XM ...
ajax上传图片并显示,Ajax实现图片上传并预览
效果见尾部. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 ...
html ajax 图片上传,Ajax实现图片上传并预览功能
先给大家展示下效果图,大家感觉不错,请参考实现代码. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图 ...
kindeditor扩展粘贴截图功能修改图片上传路径并通过webapi上传图片到图片服务器...
2019独角兽企业重金招聘Python工程师标准>>> kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. ...
php用ajaxs上传图片_jquery+ajax+php 图片上传
最近在写"网上商城"的课程设计,用到了图片上传. 我要实现的功能主要有:(1)能够上传多张图片,不过当然是有限制的,最多5张:(2)能够进行图片预览:(3)能够删除图片:(4)服务 ...
php模板多图上传插件,PHP+jQuery+Ajax多图片上传插件
注:本地预览无效,需要在服务断运行使用方法 HTML 首先我们在页面上放置个上传按钮,使用POST提交到ajax.php.#ul_pics 用来显示上传完毕后的图片.关于按钮.进度条.图片垂直居中样 ...
Ajax实现图片上传并预览
效果见尾部. 最近在使用ThinkPHP5开发项目中客户有一个需求是在图片上传时附带预览功能.虽然现在有很多的插件能实现,但是还是觉得自己写比较好.我们知道,图片上传需要一个input:file表单 ...
c ajax 上传图片插件,ajax实现图片上传和预览
图片上传功能 html结构: ![](6f4fbfb7/addimg.png) 在html中input的type=file就可以实现文件的上传功能,在其属性中也包含一个accept='':可以限制文件 ...

ajax jq 图片上传请求头_Jquery ajaxsubmit上传图片实现代码

ajax jq 图片上传请求头_Jquery ajaxsubmit上传图片实现代码相关推荐

最新文章

热门文章