Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Recently, I am working on an Internet project. The solution is to separate the front and back ends, and I am mainly responsible for the front-end framework design. After business analysis, the project adopts Requirejs+ AvalonJS +jquery to complete the development.

The front and back end realized the interface call through the cross-domain, and also found and encountered many problems in the middle, especially in the cross-domain processing process of rich text editor and upload plug-in, we laboured our brains, and finally solved the problem, and recorded the solution process for everyone’s reference and learning.

JQuery File Upload

JQuery File Upload plug-in is selected for Upload, compatibility is relatively good, and cross-domain support, but there is no complete cross-domain Demo, can only look for help source, diy to achieve.

Download: github.com/blueimp/jQu…

Implementation method

The page introduce

<link rel="stylesheet" type="text/css" href=".. /.. /src/widget/jQueryFileUpload/css/jquery.fileupload.css"> <link rel="stylesheet" type="text/css" href=".. /.. /src/widget/jQueryFileUpload/css/jquery.fileupload-ui.css"> <script type="text/javascript" src="... /.. /src/widget/jQueryFileUpload/js/vendor/jquery.ui.widget.js"></script> <script type="text/javascript" src="... /.. /src/widget/jQueryFileUpload/js/jquery.iframe-transport.js"></script> <script type="text/javascript" src="... /.. /src/widget/jQueryFileUpload/js/jquery.fileupload.js"></script> <! <input id="fileupload" type="file" name="files" multiple>Copy the code

JS script

$('#fileupload').fileupload({ url: config.getUrl()+"upload! upload.do", type:"POST", dataType:"json", autoUpload : true, acceptFileTypes: /(.|/)(jpe? g|png)$/i, formData: {model:1}, forceIframeTransport: true, redirectParamName:"callUrl", redirect:"http://"+window.location.host+"/app/callupload.html?" ,// callback page done: function (e, data) { $.each(data.result.files, function (index, file) { model.fileVO.push({attach_root_id:file.id,file_path:file.url}); }); }, fail:function(e,data){console.log(" upload failed: "+ data.errorlog); }});Copy the code

Create a callback page (callupload.html)

<body>
    <script type="text/javascript">
        document.body.innerText=document.body.textContent=decodeURIComponent(window.location.search.slice(1));
    </script>
</body>
Copy the code

Background upload API

Background using.NET MVC pattern development of a simple upload example interface

string result = file.FileName; context.Response.Headers.Add("Cache-Control", "no-cache"); context.Response.AddHeader("Access-Control-Allow-Origin", "*"); context.Response.AddHeader("Access-Control-Allow-Headers", "x-requested-with"); context.Response.AddHeader("Location", callUrl + "? msg=" + result); context.Response.Redirect(callUrl + "? msg=" + result);Copy the code

Article content if write existence question welcome message to point out, let us common exchange, common discussion, common progress ~~~

If the article is helpful to you, move your little hands to praise, encourage, give me the power to move forward.

“Welcome to the discussion in the comments section. The excavation authorities will draw 100 nuggets in the comments section after project Diggnation. See the event article for details.”